How to make such a slider without unnecessary functionality?

F

freeman02042017-10-23 13:42:15

JavaScript

freeman0204, 2017-10-23 13:42:15

There is a big picture and a few small ones. And when you click on a small picture, it appears instead of a large one. You can’t swipe small pictures, they are static, you can only swipe a large one. There are similar sliders but they don't suit me.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Roman, 2017-10-24
@freeman0204

<!DOCTYPE html>
<html>

<head>
  <style type="text/css" media="all">
    * {
      padding: 0;
      margin: 0;
    }
    
    .bigImage img {
      width: 400px;
    }
    
    .smallImages img {
      width: 100px;
      padding: 0 1px;
    }
  </style>
</head>

<body>
  <div class="bigImage">
    <img src="" alt="" />
  </div>
  <div class="smallImages">
    <img src="http://imagine.pics/images/753/75359.jpg" alt="" />
    <img src="http://wallpage.ru/imgbig/wallpapers_5087.jpg" alt="" />
    <img src="http://carster.info/images/car_catalog/bmw/2013-bmw-m3-convertible_4.jpg" alt="" />
    <img src="http://widefon.com/_ld/169/81658594.jpg" alt="" />
  </div>
  <script>
    let bigImage = document.querySelector('.bigImage img');
    bigImage.setAttribute('src',
      document.querySelectorAll('.smallImages img')[0].getAttribute('src'));
    document.querySelectorAll('.smallImages')[0].onclick = function(event) {
      let link = event.target.getAttribute('src');
      bigImage.setAttribute('src', link);
    }
  </script>
</body>

</html>

If the option is suitable, I can help bring it to mind.
I guess another swipe to add and will be your option?