https://qwerty.work/tags/slick.js/ Recent content in Slick.js on qwerty.work Hugo -- gohugo.io ja-JP Fri, 05 Nov 2021 13:50:27 +0900 https://qwerty.work/post/2021/11/jquery-slickjs-slider/ Fri, 05 Nov 2021 13:50:27 +0900 https://qwerty.work/post/2021/11/jquery-slickjs-slider/ <h2 id="画像のスライダー">画像のスライダー </h2><p>画像のスライドを簡単に実現できるJSないかな～と探してみたら、あっさり見つけることができたのでメモ。</p> <h2 id="jqueryに依存するもの">jQueryに依存するもの </h2><h3 id="slockjs">Slock.js </h3><h4 id="slickjsを使った参考例">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move01/6-1-6/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move01/6-1-6/" alt="https://coco-factory.jp/ugokuweb/move01/6-1-6/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move01/6-1-6/</span> </div> </a> </div> <h4 id="公式サイト">公式サイト </h4> <div class="link-card"> <a href="https://kenwheeler.github.io/slick/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://kenwheeler.github.io/slick/" alt="https://kenwheeler.github.io/slick/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://kenwheeler.github.io/slick/</span> <span class="link-card-url">https://kenwheeler.github.io/slick/</span> </div> </a> </div> <h2 id="jqueryが不要なもの">jQueryが不要なもの </h2><h3 id="swiperjs">Swiper.js </h3><h4 id="slickjsを使った参考例-1">Slick.jsを使った参考例 </h4> <div class="link-card"> <a href="https://www.rectus.co.jp/archives/496" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.rectus.co.jp/archives/496" alt="https://www.rectus.co.jp/archives/496" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.rectus.co.jp/archives/496</span> <span class="link-card-url">https://www.rectus.co.jp/archives/496</span> </div> </a> </div> <div class="link-card"> <a href="https://digipress.info/tech/introducing-swiper-js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://digipress.info/tech/introducing-swiper-js/" alt="https://digipress.info/tech/introducing-swiper-js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://digipress.info/tech/introducing-swiper-js/</span> <span class="link-card-url">https://digipress.info/tech/introducing-swiper-js/</span> </div> </a> </div> <h4 id="公式サイト-1">公式サイト </h4> <div class="link-card"> <a href="https://github.com/nolimits4web/swiper" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/nolimits4web/swiper" alt="https://github.com/nolimits4web/swiper" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/nolimits4web/swiper</span> <span class="link-card-url">https://github.com/nolimits4web/swiper</span> </div> </a> </div>