Membuat gambar slider + efek + carousel

coba <a href='https://sekolahkoding.com/kelas?search=galeri'>belajar membuat galeri di sekolahkoding</a>

Dear Hilmanspace,

Sebelumnya saya sangat tertarik sekali melihat youtube video https://youtu.be/ncz9KD6f-Zo (pada menit 7:08) untuk membuat carousel cuma bentuk nya kalau saya lihat mirip seperti roundabout, bagus sekali bisa di swipe-click-dan bergeser responsive. Saya sudah berusaha berkali kali, tapi tidak juga ketemu cara membuat seperti itu. Jika berkenan boleh saya minta petunjuk untuk membuat seperti itu.

1. Saya sudah coba buat / belajar <pre> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Bootstrap Example&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;style&gt; .carousel-inner &gt; .item &gt; img, .carousel-inner &gt; .item &gt; a &gt; img { max-width: 100%; max-height: 100%; margin: 0px auto; }

.carousel-indicators { position: absolute; bottom: 0px; }

.carousel { overflow: hidden; max-width: 50%; margin: 0px auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt;

&lt;div class="container"&gt;

&lt;div id="myCarousel" class="carousel slide" data-touch="true" data-ride="carousel" data-interval="1500" style="height: 225px"&gt; &lt;!-- Indicators --&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="active" style="border-color: navy"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1" style="border-color: lightblue"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="2" style="border-color: lightblue"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="3" style="border-color: lightblue"&gt;&lt;/li&gt; &lt;/ol&gt;

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="https://s3-ap-southeast-1.amazonaws.com/fs.capillary.sg/intouch_creative_assets/e622ce97a49f3bd513ad.jpg" alt="eraclub image" width="600px" height="200">
  </div>

  <div class="item">
    <img src="https://s3-ap-southeast-1.amazonaws.com/fs.capillary.sg/intouch_creative_assets/ba75b598afbc93154936.jpg" alt="eraclub image" width="600px" height="200">
  </div>

  <div class="item">
    <img src="https://s3-ap-southeast-1.amazonaws.com/fs.capillary.sg/intouch_creative_assets/4b15faf196cc85cb5937.jpg" alt="eraclub image" width="600px" height="200">
  </div>

  <div class="item">
    <img src="https://s3-ap-southeast-1.amazonaws.com/fs.capillary.sg/intouch_creative_assets/a5596edecd4813d11ca2.jpg" alt="eraclub image" width="600px" height="200">
  </div>


  <!-- Left and right controls -->
 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="background: transparent; width: 20px">
    <span class="glyphicon glyphicon-chevron-left" style="color: navy"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="background: transparent; width: 20px">
    <span class="glyphicon glyphicon-chevron-right" style="color: navy"></span>
    <span class="sr-only">Next</span>
  </a>


</div>

&lt;/div&gt; &lt;/div&gt;

&lt;script&gt; $(document).ready(function(){

$("#myCarousel").carousel("pause");

// Enable Carousel Indicators $(".item1").click(function(){ $("#myCarousel").carousel(0); }); $(".item2").click(function(){ $("#myCarousel").carousel(1); }); $(".item3").click(function(){ $("#myCarousel").carousel(2); }); $(".item4").click(function(){ $("#myCarousel").carousel(3); });

// Enable Carousel Controls $(".left").click(function(){ $("#myCarousel").carousel("prev"); }); $(".right").click(function(){ $("#myCarousel").carousel("next"); }); }); &lt;/script&gt;

&lt;style type="text/css"&gt; .container{ width: 100% !important

}

&lt;/body&gt; &lt;/html&gt; </pre>

2. Agar bisa yang seperti di video bisa di drag geser dan juga swipe di touchscreen itu gimana ya?

Sebelumnya terima kasih banyak atas bantuannya

Arief Kurniadi S.