Simple pure css or simple Javascript/Jquery slideshow ?

[whitedragon101]

I am looking to have a div where the images scroll left to right inside a div. The div will be set to the full width of the screen, whatever that is. Either by absolute position left 0 right 0, or width 100%.

I Have found this pure CSS version which seems super elegant but the widths are fixed values at 800px. Does anyone have an idea of how to use this (see link below) with my 100% width div or another example of code where this is possible ?

I'd really like the slide animation where it looks like the images scroll from left to right when they change rather than just instantly changing.

http://qnimate.com/creating-a-slider-using-html-and-css-only/

css, javascript or query all fine in that order of preference.


Thanks

 

[olup]

I am looking to have a div where the images scroll left to right inside a div. The div will be set to the full width of the screen, whatever that is. Either by absolute position left 0 right 0, or width 100%.

I Have found this pure CSS version which seems super elegant but the widths are fixed values at 800px. Does anyone have an idea of how to use this (see link below) with my 100% width div or another example of code where this is possible ?

I'd really like the slide animation where it looks like the images scroll from left to right when they change rather than just instantly changing.

http://qnimate.com/creating-a-slider-using-html-and-css-only/

css, javascript or query all fine in that order of preference.


Thanks

You mean like a continous auto scroll or can it have navigation?
Maybe you can find something on here that does the trick: http://www.unheap.com/media/galleries/

 

[whitedragon101]

You mean like a continous auto scroll or can it have navigation?
Maybe you can find something on here that does the trick: http://www.unheap.com/media/galleries/

The ideal behaviour would be display pic for x seconds then scroll to next. But also have those dots to navigate as the user chooses.

This would be for one of those top bars on websites where instead of one pic it has 3 or 4 that scroll.

 

[cis4life]

Just use the setInterval function to achieve this.

var mySlideShow = setInterval(changeSlide, 10000); //10000 = 10 Seconds

function changeSlide() {
    //Code To Change Images, basically change SRC of your div img tag from your array of image / slides.
}

 

[whitedragon101]

Just use the setInterval function to achieve this.

var mySlideShow = setInterval(changeSlide, 10000); //10000 = 10 Seconds

function changeSlide() {
    //Code To Change Images, basically change SRC of your div img tag from your array of image / slides.
}

Thanks for post. That is the way I am doing it now. However the bit I am stuck on is how to get the new images to appear as if they are scrolling in from right to left.

The width of the div is set with margin left 0 margin right 0, so it is always full width of the screen.

If you have any ideas that would be cool

 

[JayBayAye8]

Watch out for setInterval with any speed below 1 second. I just noticed the quote above has 10 seconds, but anything lower will be slowed down to 1 second when out of focus (in a background tab), which means they'll start queueing up on the user if you aren't doing an if loop on the queue. You may do better to use a recursive setTimeout to dodge that problem.

 

[xnatex]

I recently had to set up a photo gallery for a product details page at work. I needed it to be responsive (phones/tablets/desktop), and also wanted something that supported lazy loading images, so that you only downloaded as many high-res images as were absolutely necessary. After looking around a lot, I came across Fotorama, which worked out nicely for me.

http://fotorama.io

Whatever you do, avoid http://kenwheeler.github.io/slick. I found it to be a nightmare to work with. Though, my website required me to have a thumbnail strip that was synced with a main image, and also included a "3 of 17" counter that always shows the current slide number. Maybe Slick is fine for simpler setups, but their "slider syncing" feature has some serious bugs.


I learned about Fotorama from browsing reverb.com, and checking out what photo gallery they use. Here's an example in the wild. https://reverb.com/item/6901963-fender-telecaster-deluxe-1974-black
[doublepost=1508460344][/doublepost]Also, I'll say that while it sounds really nice to not require JS for your slider (I totally get it and feel like the internet goes crazy with using JS for things that should be CSS's job), it would be really wise to support lazy loading of the images. It'll make your page load faster because you download the slides as they come, instead of all the second the page loads. You can even have it preload the next 1 slide, so that you don't actually have to wait for the slide to download. Loading 2 slides only is much better than loading N slides that you don't care to see.

 

[960design]

I Have found this pure CSS version which seems super elegant but the widths are fixed values at 800px.

An aside:

1. HTML = Framework
2. CSS = Beauty
3. JS = Action

Try to keep your development separated into components. There are way too many benefits to this, but I'll share a couple:

1. Multiple developers can work on the same application at the same time and not step on each others toes
2. When something breaks, you know where to look to fix it.
3. When you go back three years from now to update or edit something... you know where to find it.

Here's a simple tutorial ( automated is near the bottom ):
https://www.w3schools.com/howto/howto_js_slideshow.asp

 

[xnatex]

1. HTML = Framework
2. CSS = Beauty
3. JS = Action

Very true. One important note, most animations can be achieved using CSS alone. So, the "action" that the JS takes should be as simple as toggling a CSS class, which triggers a CSS3 animation.

Before CSS3, people would use JS to animate things. Want to fade something out? Have some JS that inline styles a CSS "opacity" property in, that constantly changes the value, updating the DOM hundreds of times a second (which is very harsh on the CPU). Nowadays, you just define your starting state (so maybe opacity 0), define your transition time, and then a different rule adds the ending state.

.thing {
  opacity: 1;
  transition: opacity 1s;
}
.thing.active {
  opacity: 0;
}

That CSS would fade the .thing element out over 1 second.

https://www.w3schools.com/css/css3_transitions.asp

Here's a good article on high performance animations.
https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

 

[960design]

Very true. One important note, most animations can be achieved using CSS alone. So, the "action" that the JS takes should be as simple as toggling a CSS class, which triggers a CSS3 animation.

Excellent points.