Creating a slideshow that slides left?

Question

I have been looking for for just a very basic code that can slide slideshow images to the left and width be in percentage.

I have looked at http://jquery.malsup.com/cycle2/ but when went to load it on my site would not pick up cycle "error" so not using that any more.

Why do most people do slideshows that fade in and out? Not many people seem to do slideshows that slide the images to the left or right.

I am just after a basic jquery code that can let me slide images to the left and width in %percentages

Most of the tutorials that I have found are fadein and out even on here they are mostly fade.

Do not want to use any bootstrap or other plugin.

If any of you know a simple javascript code that can let me slide images to the left and have width in percentages please let me know. I can do the basic styling my self.

Answer 1

I put it here for you, you can check if you like it and grab the source code. http://medda86.com/stackoverflow/slider/

It's a jquery slider doing what you ask for. Like a skeleton for the slider, you can style it and use it as you see fit.

Answer 2

Many people are struggling with the speed, precise connection between slides, infinity etcetera. I keep it simple by adding one image twice. One at the beginning and one at the end of the slide array. So the viewer would not notice that the infinity has been broken. Slideshows in pure CSS still running even when someone turn off the JavaScript, and furthermore it is way faster than JavaScript.

 @media screen and (min-width: 768px) { .carousel { overflow: hidden; margin-top: 39px; width: 100%; /* wider than 100%, because to there is a margin on the side of the carousel after assigning position relative*/ position: relative; left: 0; top: 0; z-index: 10; } } @media screen and (max-width: 767px) { .carousel { overflow: hidden; margin-top: 23px; width: 100%; position: relative; left: 0; top: 0; z-index: 10; } } .slideshow-frame { list-style: none; position: relative; height: 100%; width: 500%; float: left; overflow: hidden; margin-left: -40px; animation: slidespeed 24s infinite; } .slideshow-frame > li { position: relative; float: left; width: 20%; /* 100% / number of slide images */ } .carousel img { display: block; width: 100%; max-width: 100%; } @keyframes slidespeed { 0% { left: 0%; } 20.5% { left: -100%; } 25% { left:-100%; } 45.5% { left: -200%; } 50% { left:-200%; } 70.5% { left: -300%; } 75% { left:-300%; } 95.5% { left: -400%; } 100% { left: -400%; } } 

 <div class="carousel"> <ul class="slideshow-frame"> <li> <img src="http://www.sibelco.com.au/wp-content/uploads/photo-gallery/Sibelco_Salt%20Ash_NSW_Day.jpg" alt="" class="slide-image" /> </li> <li class="other-image"> <img src="http://demo.accesspressthemes.com/wordpress-plugins/wp-1-slider-pro/wp-content/uploads/2016/08/slider-8.jpg" alt="" class="slide-image" /> </li> <li class="other-image"> <img src="http://dsconstructionltd.com/FM/Gardening/files/stacks-image-83418b2.jpg" alt="" class="slide-image"/> </li> <li class="other-image"> <img src="http://www.dsconstructionltd.com/FM/Plumbing/files/stacks-image-498320d.jpg" alt="" class="slide-image"/> </li> <li class="other-image"> <img src="http://www.sibelco.com.au/wp-content/uploads/photo-gallery/Sibelco_Salt%20Ash_NSW_Day.jpg" alt="" class="slide-image"/> </li> </ul> </div>