CODEWITHSUNDEEP
javascriptjquerycss-animations
SymmetricsWeb
SymmetricsWeb

Reputation: 636

jquery/javascript loop slider item

I created a basic slider with animation effect,

I'm using transform: translate3d to move the slider left or right and have an issue and a bit lost on how to make it loop and slide either left or right infinitely.

I'm trying to make it so when you click left or right it keeps showing and rotating the images.

I also wanted to have a smooth transition with z-index, but it doesn't seem possible.

Here's a jsFiddle of what I have accomplished https://jsfiddle.net/wo67h4n9/

here's the HTML code

<div class="vs-slider">
  <div class="vss-wrap">
    <div class="item active"><img src="http://lorempixel.com/430/280/sports" alt="Slider Item" width="430" height="280"></div>
    <div class="item"><img src="http://lorempixel.com/430/280/animals" alt="Slider Item" width="430" height="280"></div>
    <div class="item"><img src="http://lorempixel.com/430/280/nature" alt="Slider Item" width="430" height="280"></div>
  </div>
  <ul class="vss-nav">
    <li class="prev">&lt;</li>
    <li class="next">&gt;</li>
  </ul>
</div>

jQuery 

;( function($) {
    $(document).ready(function() {
        $('.vs-slider .item').each( function() {
            $(this).css('z-index', $('.vs-slider .item').length - $('.vs-slider .item').index(this));
        });

        $('.vss-nav').on('click', '.prev, .next', function() {
            var active = $(this).closest('.vs-slider').find('.item.active');
            if ( $(this).hasClass('next') ) {
                vss_moveleft($('.vs-slider'));
                active.next().addClass('active');
            } else {
                vss_moveleft( $('.vs-slider'), 'right');
                active.prev().addClass('active');
            }
            active.removeClass('active');
        });

        function vss_moveleft( slider, type = 'left' ) {
            var itemWidth = slider.find('.item').outerWidth() - 299,
            itemTotal = slider.find('.item').length,
            currentOff = slider.find('.vss-wrap').position().left,
            movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
            slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');

        }
    });
})(jQuery);

CSS

body {
  background: #222
}
.vs-slider {
  position: relative;
  overflow: hidden;    
  max-height: 290px;
  max-width: 500px;
}
.vs-slider img {
    margin: 0;
    vertical-align: top;
}
.vs-slider .vss-wrap {
    min-width: 90VW;
    transform: translate3d(0px, 0px, 0px);
    transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
    clear: both;
    width: 100%;
    display: block;
    content: "";
}
.vs-slider .item {
    float: left;
    border: 1px solid #fff;
    transform: scale(.7);
    position: relative;
    z-index: 1;
    transition: all 1s ease 0s;
    margin-right: -299px;
}
.vs-slider .item.active {
    transform: scale(1);
    z-index: 20 !important;
}
.vs-slider .item:not(.active) {
    z-index: 0;
    cursor: pointer;
}
.vss-nav {
    position: absolute;
    margin: 0;
    padding: 0;
    right: 5px;
    bottom: 0;
}
.vss-nav li {
    display: inline-block;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
}

Would appreciate any help.

Thanks

Upvotes: 0

Views: 1026

Answers (2)

Juorder Gonzalez
Juorder Gonzalez

Reputation: 1652

Hey what a interesting question you did, you need to care about some things to achieve your goal, so I will explain what you missing.

  1. You can use pure css to apply the transition with out JS, so the things you need are Siblings Selectors, this will help you to apply styles to all elements in the right side of the specific element.

For Example: imagine we have a simple markup like

<div>
  <div class="item active">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

// Styles.css

.item.active ~ .item {
  background: blue;
}

The style above will be apply to the all elements with the item class just in the right side of the .item.active element

  1. Apply styles for all item class to be applied to thrown them to the left side.

  2. Apply style for .item.active element to be the only to be shown.

  3. To make your slider infinitive, you need to check when user click next and prev arrow, and verify when the user will reach the end at the next or at the prev elements, then you need to take the first element and put it at the end, for the next case, and take the last element and put it at the beginning in prev case.

  4. You need to check if when the slider start, if the first element is active, then you need to clone all elements and put them in the reverse order just before to the first element.

So, no more words, here you need the working example, that will help you a lot to understand this feature for your infinitive slider.

;( function($) {
    $(document).ready(function() {
    		/*
        This function will check if the active class is in the first element then we will clone all elements at the left side of the first element to make it circular sliding
        */
      	function cloneElementsIfStartAtZero() {
          var firstItem = $('.item').first();
          var isActiveFirst = firstItem.hasClass('active');

          if (isActiveFirst) {
            var last = firstItem;
            $($('.item').get().reverse()).each(function(){
              var current = $(this).clone().removeClass('active');
              last.before(current);
              last = current;
            });
          }
        }
    
    		cloneElementsIfStartAtZero();

        $('.vss-nav').on('click', '.prev, .next', function() {
        		// we get the active, first, and last elements
            var active = $('.item.active');
            var first = $('.item').first();
            var last = $('.item').last();
            
            // if click at next arrow
            
            if ( $(this).hasClass('next') ) {
            		// check if next element is the last, then take the first element and set it to the last element
                if(active.next().next().length === 0) {
                	last.after(first);
                }
                // apply active class to make transition
                active.next().addClass('active');
            } else {
            		// check if prev element is the first, then take last element and set it before the first element
            		if(active.prev().length === 0 || active.prev().prev().length === 0) {
                	first.before(last);
                }
                // then appy active class to apply transition
								active.prev().addClass('active');
            }
            active.removeClass('active');
        });

        function vss_moveleft( slider, type = 'left' ) {
            var itemWidth = slider.find('.item').outerWidth() - 299,
            itemTotal = slider.find('.item').length,
            currentOff = slider.find('.vss-wrap').position().left,
            movemVal = type === 'left' ? currentOff - itemWidth : currentOff + itemWidth;
            slider.find('.vss-wrap').css('transform', 'translate3d('+ movemVal +'px, 0px, 0px)');

        }
    });
})(jQuery);
body {
  background: #222
}
.vs-slider {
  position: relative;
 /* overflow: hidden;*/    
  max-height: 290px;
  max-width: 500px;
  margin: auto;
}
.vs-slider img {
	margin: 0;
	vertical-align: top;
}
.vs-slider .vss-wrap {
	min-width: 90VW;
	transform: translate3d(0px, 0px, 0px);
	transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
    clear: both;
    width: 100%;
    display: block;
    content: "";
}

/* THIS WILL MAKE THE TRANSITION OVER CSS */

/*
This will throw all .item to the left at 50% relative to the container .vss-wrap
*/
.vs-slider .item {
  transform: translate3d(-50%, 0, 0) scale(.7);
  z-index: 1;
  position: absolute;
  opacity: .2;
  transition: all 1s;
  top: 0;
  z-index: 1;
}

/*
This will show and apply the transition only to the .active element
*/
.vs-slider .item.active {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  z-index: 2;
  position: relative;
}

/*
This will throw all elements set to the right of the .active element to 50% to the right and apply css styles
*/
.vs-slider .item.active ~ .item {
  transform: translate3d(50%, 0, 0) scale(.7);
}

/* THIS WILL MAKE THE TRANSITION OVER CSS */

.vss-nav {
    position: absolute;
    margin: 0;
    padding: 0;
    right: 5px;
    bottom: 0;
}
.vss-nav li {
    display: inline-block;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vs-slider">
						<div class="vss-wrap">
							<div class="item active"><img src="https://i.guim.co.uk/img/media/59dee3fae368b6625fcd588cdc0c759f6aacd117/0_0_6100_3660/500.jpg?quality=85&auto=format&fit=max&s=998f324a337c7c17be1d754e3b856201" alt="Slider Item" width="430" height="280"></div>
							<div class="item"><img src="https://www.chileholidayarchitects.com/wp-content/uploads/2018/11/Chile-General-007-500x300.jpg" alt="Slider Item" width="430" height="280"></div>
							<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDYTOz0c9d1h4Xj4HULfGeZVrQMw3zzA77vEPuX-RMY6ah8GkY" alt="Slider Item" width="430" height="280"></div>
						</div>
						<ul class="vss-nav">
							<li class="prev">&lt;</li>
							<li class="next">&gt;</li>
						</ul>
					</div>

Upvotes: 0

Nimitt Shah
Nimitt Shah

Reputation: 4587

You can make it simple by index. I have no idea why you have used 299 so considering it as 100 x 3 where 100 is left move of 1.

See the Snippet below:

;( function($) {
    $(document).ready(function() {
        $('.vs-slider .item').each( function() {
            $(this).css('z-index', $('.vs-slider .item').length - $('.vs-slider .item').index(this));
        });

        $('.vss-nav').on('click', '.prev, .next', function() {
            var active = $(this).closest('.vs-slider').find('.item.active');
            var activeIndex = $('.vs-slider .item').index(active);
            
            var moveValue = 0;
            
            if ( $(this).hasClass('next') ) {
            	if(activeIndex+1== $('.vs-slider .item').length){
                moveValue = 0;
								$($('.vs-slider').find('.item').first()).addClass('active');
              }else{
              	moveValue = $('.vs-slider').find('.vss-wrap').position().left - ($('.vs-slider').find('.item').outerWidth() - 299);;
                active.next().addClass('active');
               ;
              }
            }else{
            	if(activeIndex-1 == -1){
              	moveValue = -($('.vs-slider .item').length * 100);
								$($('.vs-slider').find('.item').last()).addClass('active');
              }else{
              	moveValue =  $('.vs-slider').find('.vss-wrap').position().left + ($('.vs-slider').find('.item').outerWidth() - 299);
                active.prev().addClass('active');
              }            
            }
            $('.vs-slider').find('.vss-wrap').css('transform', 'translate3d('+ moveValue +'px, 0px, 0px)');
            active.removeClass('active');
        });
        
    });
})(jQuery);
body {
  background: #222
}
.vs-slider {
  position: relative;
  overflow: hidden;    
  max-height: 290px;
  max-width: 500px;
}
.vs-slider img {
	margin: 0;
	vertical-align: top;
}
.vs-slider .vss-wrap {
	min-width: 90VW;
	transform: translate3d(0px, 0px, 0px);
	transition: all 0.5s ease 0s;
}
.vs-slider .vss-wrap::after {
    clear: both;
    width: 100%;
    display: block;
    content: "";
}
.vs-slider .item {
	float: left;
	border: 1px solid #fff;
	transform: scale(.7);
	position: relative;
	z-index: 1;
	transition: all 1s ease 0s;
	margin-right: -299px;
}
.vs-slider .item.active {
	transform: scale(1);
	z-index: 20 !important;
}
.vs-slider .item:not(.active) {
    z-index: 0;
    cursor: pointer;
}
.vss-nav {
    position: absolute;
    margin: 0;
    padding: 0;
    right: 5px;
    bottom: 0;
}
.vss-nav li {
    display: inline-block;
    color: #fff;
    margin: 0 5px;
    cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vs-slider">
						<div class="vss-wrap">
							<div class="item active"><img src="http://lorempixel.com/430/280/sports" alt="Slider Item" width="430" height="280"></div>
							<div class="item"><img src="http://lorempixel.com/430/280/animals" alt="Slider Item" width="430" height="280"></div>
							<div class="item"><img src="http://lorempixel.com/430/280/nature" alt="Slider Item" width="430" height="280"></div>
						</div>
						<ul class="vss-nav">
							<li class="prev">&lt;</li>
							<li class="next">&gt;</li>
						</ul>
					</div>

You can also test it here

Upvotes: -1

Related Questions