Carousel 1

carousel-1.markdown

Carousel 1

A Pen by miha on CodePen.

License.

index.html

<section>
  <ul class="carousel">
    <li class="items main-pos" id="1"><p>1</p></li>
    <li class="items right-pos" id="2"><p>2</p></li>
    <li class="items back-pos" id="3"><p>3</p></li>
    <li class="items back-pos" id="4"><p>4</p></li>
    <li class="items back-pos" id="5"><p>5</p></li>
    <li class="items left-pos" id="6"><p>6</p></li>
  </ul>
<span>
  <input type="button" value="Prev" id="prev">
  <input type="button" value="Next" id="next">
</span>
</section>

script.js

//slideshow style interval
var autoSwap = setInterval( swap,2000);

//pause slideshow and reinstantiate on mouseout
$('ul, span').hover(
  function () {
    clearInterval(autoSwap);
}, 
  function () {
   autoSwap = setInterval( swap,3500);
});

//global variables
var items = [];
var startItem = 1;
var position = 0;
var itemCount = $('.carousel li.items').length;
var leftpos = itemCount;
var resetCount = itemCount;

//unused: gather text inside items class
$('li.items').each(function(index) {
    items[index] = $(this).text();
});

//swap images function
function swap(action) {
  var direction = action;
  
  //moving carousel backwards
  if(direction == 'counter-clockwise') {
    var leftitem = $('.left-pos').attr('id') - 1;
    if(leftitem == 0) {
      leftitem = itemCount;
    }
    
    $('.right-pos').removeClass('right-pos').addClass('back-pos');
    $('.main-pos').removeClass('main-pos').addClass('right-pos');
    $('.left-pos').removeClass('left-pos').addClass('main-pos');
    $('#'+leftitem+'').removeClass('back-pos').addClass('left-pos');
    
    startItem--;
    if(startItem < 1) {
      startItem = itemCount;
    }
  }
  
  //moving carousel forward
  if(direction == 'clockwise' || direction == '' || direction == null ) {
    function pos(positionvalue) {
      if(positionvalue != 'leftposition') {
        //increment image list id
        position++;
        
        //if final result is greater than image count, reset position.
        if((startItem+position) > resetCount) {
          position = 1-startItem;
        }
      }
    
      //setting the left positioned item
      if(positionvalue == 'leftposition') {
        //left positioned image should always be one left than main positioned image.
        position = startItem - 1;
      
        //reset last image in list to left position if first image is in main position
        if(position < 1) {
          position = itemCount;
        }
      }
   
      return position;
    }  
  
   $('#'+ startItem +'').removeClass('main-pos').addClass('left-pos');
   $('#'+ (startItem+pos()) +'').removeClass('right-pos').addClass('main-pos');
   $('#'+ (startItem+pos()) +'').removeClass('back-pos').addClass('right-pos');
   $('#'+ pos('leftposition') +'').removeClass('left-pos').addClass('back-pos');

    startItem++;
    position=0;
    if(startItem > itemCount) {
      startItem = 1;
    }
  }
}

//next button click function
$('#next').click(function() {
  swap('clockwise');
});

//prev button click function
$('#prev').click(function() {
  swap('counter-clockwise');
});

//if any visible items are clicked
$('li').click(function() {
  if($(this).attr('class') == 'items left-pos') {
     swap('counter-clockwise'); 
  }
  else {
    swap('clockwise'); 
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

section {
  width: 40em;
  height: 25em;
  margin: 0 auto;
  position: relative;
}

li {
  width: 500px;
  height: 281px;
  background: #333;
  display: inline-block;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

li p {
  color: white;
  font-weight: bold;
  font-size: 5em;
  text-align: center;
  margin-top: 1.175em;
}

.items {
  position: absolute;
}

.main-pos {
  margin-left: 2em !important;
  z-index: 3000;
}

.left-pos {
  opacity: .3;
  margin-left: -17em !important;
  z-index: 1000;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
}

.back-pos {
  margin-left: 2em !important;
  opacity: .05;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  transform: scale(.5);
}

.right-pos {
  opacity: .3;
  margin-left:  21em !important;
  z-index: 1000;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
}

span {
  position: relative;
  margin: 0 auto;
  left: 17em;
  top: 20em;
}