How to make image slider with 4 slots?

Question

HI, how can i make image slider with 4 slots like here?

https://home.kpmg.com/xx/en/home.html

I jsut know JS basics , simple very simple basics

Answer 1 · 2015-10-18T02:03:37Z

October 18, 2015 2:03am

If you are not building from scratch, carousels are covered in the using JQuery Plug-ins course.

video sample: https://teamtreehouse.com/library/using-jquery-plugins/using-a-jquery-carousel/what-is-a-carousel

course: http://teamtreehouse.com/library/using-jquery-plugins

There is also a short workshop on doing a similar effect with just CSS

workshop: https://teamtreehouse.com/library/create-a-fullscreen-slider-with-css

If you just want to understand how it works to build it on your own, I put together a demo.

codepen (code below as well): http://codepen.io/drbrounsuga/pen/OyOzgy

You basically have a row of elements that you slide back and fourth within a parent element which acts as a stage. You only see the element on the stage and everything else is hidden. In the demo I set overflow to visible instead of hidden so that you can see how it's working. You can do it with javaScript or just CSS. You can approach it in many ways. In this demo I'm just using a CSS transition for the animation and I'm adding different classes which changes the left/right position of the slides.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carousel Starter</title>
  <style>

    body{ margin-left: 100px; }

    div,
    ul,
    li{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    div{
      width: 302px;
      border: 2px dashed #333;
      overflow: visible;
    }

    ul{
      list-style: none;
      height: 200px;
      width: 900px;
      transition: all 1s;
      -webkit-transform: translateX(0); 
          -ms-transform: translateX(0); 
              transform: translateX(0);
    }

    ul:after{
      content: '';
      display: table;
      clear: both;
    }

    li{
      float: left;
      width: 300px;
      height: 200px;
    }

    .red{ background-color: rgba(255, 0, 0, 0.5); }
    .green{ background-color: rgba(0, 255, 0, 0.5); }
    .blue{ background-color: rgba(0, 0, 255, 0.5); }

    ul.first{ 
      -webkit-transform: translateX(0); 
          -ms-transform: translateX(0); 
              transform: translateX(0);
    }

    ul.second{ 
      -webkit-transform: translateX(-300px); 
          -ms-transform: translateX(-300px); 
              transform: translateX(-300px); 
    }

    ul.third{ 
      -webkit-transform: translateX(-600px); 
          -ms-transform: translateX(-600px); 
              transform: translateX(-600px); 
    }
  </style>
</head>
<body>

<div>
  <ul>
    <li class="red"></li>
    <li class="green"></li>
    <li class="blue"></li>
  </ul>
</div>



<a href="#" data-slide="first">1</a> | 
<a href="#" data-slide="second">2</a> | 
<a href="#" data-slide="third">3</a>


<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('a').on('click', function(e){
  e.preventDefault();
  var slide = $(this).data('slide');
  $('ul').removeClass('first second third').addClass(slide);
});
</script>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Konrad Pilch

Konrad Pilch

How to make image slider with 4 slots?

1 Answer

LaVaughn Haynes

LaVaughn Haynes