私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

ウェブサイトのスライドショーを作成する

ウェブサイトのスライドショーを作成する


November, 18 2021

ウェブサイトのスライドショーを作成する

スライドショーはカルーセルやスライダーなどのコンポーネントであり、その主なタスクは、コンテンツの表示スペースを減らし、Webサイトにモダンな雰囲気を与えることです。 また、理解を深めるために、HTML、CSS、およびJavascriptを使用してスライドショーを作成する方法を学びましょう。

HTML、CSSを使用してスライドショーを作成する

HTML

<h3>HTML、CSSを使用してスライドショーを作成する</h3>
<div id="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><img src="https://images.pexels.com/photos/2382325/pexels-photo-2382325.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
    <div class="slide"><img src="https://images.pexels.com/photos/3578393/pexels-photo-3578393.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
    <div class="slide"><img src="https://images.pexels.com/photos/4484184/pexels-photo-4484184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
  </div>
</div>

CSS

body {
  padding: 2%;
  text-align: center;
}
#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}
.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 14s ease infinite;
}
.slide {
  float: left;
  height: 510px;
  width: 728px;
}
@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  80% {margin-left: -1456px;}
}

そして、あなたが下に見る最終結果。

See the Pen HTML、CSSを使用してスライドショーを作成する by haycuoilennao19 (@haycuoilennao19) on CodePen.

HTML、CSS、Javascriptを使用してスライドショーを作成する

HTML

<!-- カードにはスライドショーが含まれています -->
 <div class="slideshow-container">
  <!-- スライドショーの各要素の画像とコンテンツを組み合わせる-->
   <div class="mySlides fade">
     <div class="numbertext">1 / 3</div>
     <img src="https://images.pexels.com/photos/1632790/pexels-photo-1632790.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
     <div class="text">コンテンツ 1</div>
   </div>
  <div class="mySlides fade">
     <div class="numbertext">2 / 3</div>
     <img src="https://images.pexels.com/photos/1581026/pexels-photo-1581026.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
     <div class="text">コンテンツ 2</div>
   </div>
  <div class="mySlides fade">
     <div class="numbertext">3 / 3</div>
     <img src="https://images.pexels.com/photos/2582546/pexels-photo-2582546.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
     <div class="text">コンテンツ 3</div>
   </div>
  <!-- 矢印コントロールボタン-->
   <a class="prev" onclick="plusSlides(-1)">❮</a>
   <a class="next" onclick="plusSlides(1)">❯</a>
 </div>
 <br>
<!-- スライドショーコントロールサークルボタン-->
 <div style="text-align:center">
   <span class="dot" onclick="currentSlide(1)"></span>
   <span class="dot" onclick="currentSlide(2)"></span>
   <span class="dot" onclick="currentSlide(3)"></span>
 </div>

CSS

* {box-sizing:border-box}
/* スライドショーコンテナのスタイルを設定する */
 .slideshow-container {
   max-width: 1000px;
   position: relative;
   margin: auto;
 }
/* スライドショー要素の画像を非表示*/
 .mySlides {
   display: none;
 }
/* 矢印ボタンのデザイン*/
 .prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }
/* 次の矢印ボタンのデザインは右側にあります */
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
/* 矢印ボタンにカーソルを合わせると、背景が変化する効果*/
 .prev:hover, .next:hover {
   background-color: rgba(0,0,0,0.8);
 }
/* 各スライドショー要素のコンテンツのスタイルを設定します */
 .text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
 }
/* 要素の表示番号のスタイルを設定します */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
/* コントロールサークルボタンのスタイルを設定する*/
 .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
.active, .dot:hover {
   background-color: #717171;
 }
/* フェードモーションエフェクトを作成する */
 .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
 }
@-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
 }
@keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
 }

Javascript

var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

そして、あなたが下に見る最終結果。

See the Pen カードにはスライドショーが含まれています by haycuoilennao19 (@haycuoilennao19) on CodePen.

カルーセルの例

Slideshow CSS only

Slideshow CSS only

以下の結果を見ることができます。

See the Pen CSS3 Fullscreen Background Slideshow by Chris (@leetech) on CodePen.

Slideshow JavaScript with buttons

Slideshow CSS only

以下の結果を見ることができます。

See the Pen Slideshow Parallax with TweenMax by Bruno Carvalho (@bcarvalho) on CodePen.

Angular image slider example

Angular image slider example

以下の結果を見ることができます。

See the Pen Dual Slideshow Demo by Jacob Davidson (@Reklino) on CodePen.

jQuery slideshow

jQuery slideshow

以下の結果を見ることができます。

See the Pen Slick Slideshow with blur effect by Fabio Ottaviani (@supah) on CodePen.

Parallax slideshow codepen

Parallax slideshow codepen

以下の結果を見ることができます。

See the Pen Parallax Slideshow by Bruno Carvalho (@bcarvalho) on CodePen.

Slick slider jQuery

Slick slider jQuery

以下の結果を見ることができます。

See the Pen Slick Slider Fade Zoom by Fabio Ottaviani (@supah) on CodePen.

PURE CSS SLIDESHOW

PURE CSS SLIDESHOW

以下の結果を見ることができます。

See the Pen Pure CSS Slideshow Gallery by Roko C. Buljan (@rokobuljan) on CodePen.

Automatic slideshow JavaScript

Automatic slideshow JavaScript

以下の結果を見ることができます。

See the Pen Slider boomerang effect by Grandvincent Marion (@GrandvincentMarion) on CodePen.

Automatic image slider in HTML CSS JavaScript

Automatic image slider in HTML CSS JavaScript

以下の結果を見ることができます。

See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.

Vanilla javascript slideshow

Vanilla javascript slideshow

以下の結果を見ることができます。

See the Pen Slideshow Vanilla JS w/ CSS Transition by Riley Adair (@RileyAdair) on CodePen.

Javascript slideshow code with buttons

 Javascript slideshow code with buttons

以下の結果を見ることができます。

See the Pen A better simple slideshow by Mark Lee (@leemark) on CodePen.

GSAP carousel slider

GSAP carousel slider

以下の結果を見ることができます。

See the Pen Full Slider Prototype by Glauber Sampaio (@glaubersampaio) on CodePen.

Slideshow animation JavaScript

Slideshow animation JavaScript

以下の結果を見ることができます。

See the Pen Custom GSAP slider by Zoran Završki (@zzavrski) on CodePen.

SlideShow Animated

SlideShow Animated

以下の結果を見ることができます。

See the Pen SlideShow Animated by Manu K (@manukn) on CodePen.

JavaScript split screen slider

JavaScript split screen slider

以下の結果を見ることができます。

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

Automatic slideshow html

Automatic slideshow html

以下の結果を見ることができます。

See the Pen Slick Slider Slice by Fabio Ottaviani (@supah) on CodePen.

OwlCarousel Slideshow

OwlCarousel Slideshow

以下の結果を見ることができます。

See the Pen OwlCarousel Slideshow by Nathan Schmidt (@mrnathan8) on CodePen.

Simple html javascript slideshow

simple html javascript slideshow

以下の結果を見ることができます。

See the Pen Simple Image Slider by André Cortellini (@AndreCortellini) on CodePen.

Transition images slideshow javascript

Transition images slideshow javascript

以下の結果を見ることができます。

See the Pen Page Transition Carousel by alphardex (@alphardex) on CodePen.

Slideshow gallery HTML

Slideshow gallery HTML

以下の結果を見ることができます。

See the Pen Image Slider - responsive, modular, autoplay by Eric Porter (@EricPorter) on CodePen.

CSS slideshow automatic

css slideshow automatic

以下の結果を見ることができます。

See the Pen Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman (@tovic) on CodePen.

Slideshow HTML CSS

Slideshow HTML CSS

以下の結果を見ることができます。

See the Pen Stylish One Page Webdesign by Igor Milenkovic (@imilenig) on CodePen.

Responsive image slideshow css

Responsive image slideshow css

以下の結果を見ることができます。

See the Pen Slendr by Jose Quintana (@joseluisq) on CodePen.

Fullscreen Slideshow

Fullscreen Slideshow

以下の結果を見ることができます。

See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.

CSS Slideshow text

CSS Slideshow text

以下の結果を見ることができます。

See the Pen CSS Slideshow text by Joan Leon (@nucliweb) on CodePen.

Simple jQuery Slideshow

Simple jQuery Slideshow

以下の結果を見ることができます。

See the Pen Simple jQuery Slideshow by Chris Coyier (@chriscoyier) on CodePen.

Infinite Slideshow

Infinite Slideshow

以下の結果を見ることができます。

See the Pen Infinite Slideshow by Chris Coyier (@chriscoyier) on CodePen.

Tweenmax slideshow

Tweenmax slideshow

以下の結果を見ることができます。

See the Pen Tweenmax slideshow by Matheus Verissimo (@astrixsz) on CodePen.

Prism Effect Slider

Prism Effect Slider

以下の結果を見ることができます。

See the Pen Prism Effect Slider by victor (@vkanet) on CodePen.

Vue.js Simple Image Carousel

Vue.js Simple Image Carousel

以下の結果を見ることができます。

See the Pen Vue.js Simple Image Carousel/Slider (ES 5) by Paulo Elias (@pauloelias) on CodePen.

Responsive Slideshow

Responsive Slideshow

以下の結果を見ることができます。

See the Pen Responsive Slideshow / Carousel with only HTML5 & CSS3 by Trung Vo (@trungk18) on CodePen.

Sailor Slide

Sailor Slide

以下の結果を見ることができます。

See the Pen Sailor Slide by Bryan Stoner (@mimoduo) on CodePen.

Slideshow presentation

Slideshow presentation

以下の結果を見ることができます。

See the Pen Slideshow presentation by Something Strange (@something-strange) on CodePen.

Slideshow Owl Carousel With Youtube

Slideshow Owl Carousel With Youtube

以下の結果を見ることができます。

See the Pen Slideshow Owl Carousel + YouTube by Pierre Vion (@pierrinho) on CodePen.

React Product Slides

React Product Slides

以下の結果を見ることができます。

See the Pen React Product Slides by Mike Quinn (@mprquinn) on CodePen.

React Slideshow

React Slideshow

以下の結果を見ることができます。

See the Pen React Slideshow by Gabriele Corti (@borntofrappe) on CodePen.

Nautilus Slideshow

Nautilus Slideshow

以下の結果を見ることができます。

See the Pen Nautilus Slideshow by Nikolas Payne (@npayne) on CodePen.

概要:

この記事があなたのウェブサイトプロジェクトの開発に役立つスライドショーを提供することを願っています。 ご質問やウェブデザインがございましたら、私にメールしてください。 できるだけ早く返信いたします。 より良い記事を書くことができるようにウェブサイトをサポートしてください。