I have no talent at all. I am only passionate about understanding

Article

How to Create Slideshow For Websites(2021)

How to Create Slideshow For Websites(2021)


October, 9 2021

How to Create Slideshow For Websites(2020)

Slideshow is a component like carousel or slider whose main task is to reduce space display content as well as give a beautifully designed modern feel to your website. And to understand Let's go to learn how to create slideshow using HTML, CSS and Javascript!

How to Create Slideshow Using HTML, CSS

In this part we will build slideshow based on -webkit-animation attribute in CSS please!

HTML

<h3>Tạo slideshow bằng HTML Và 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;}
}

And the final result you see below (You should switch to 0.5x screen mode to see more clearly):

See the Pen gOrgogK by haycuoilennao19 (@haycuoilennao19) on CodePen.

How to Create Slideshow Using HTML, CSS And Javascript

Now we will enhance the slideshow by adding controls as well as responsive display on multiple device screens!

HTML

<!-- Thẻ Chứa Slideshow -->
<div class="slideshow-container">
  <!-- Kết hợp hình ảnh và nội dung cho mội phần tử trong slideshow-->
  <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">Nội Dung 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">Nội Dung 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">Nội Dung 3</div>
  </div>
  <!-- Nút điều khiển mũi tên-->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Nút tròn điều khiển slideshow-->
<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}
/* thiết lập style cho slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* ẩn hình ảnh cho phần tử slideshow */
.mySlides {
  display: none;
}
/* thiết kế nút mũi tên*/
.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;
}
/* thiết kế nút mũi tên next nằm phía bên phải */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* hiệu ứng thay đổi background khi hover vào nút mũi tên*/
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Thiết lập style cho nội dung của mỗi phần tử slideshow */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Thiết lập style cho số hiển thị của phần tử */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* thiết lập style  nút tròn điều khiển*/
.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;
}
/* tạo hiệu ứng chuyển động fade */
.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";
}

And the final result you can see below:

See the Pen zYqNpjo by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link W3School

Some Slideshow Examples

Slideshow CSS only

Slideshow CSS only

You can see the results below.

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

Slideshow JavaScript with buttons

Slideshow CSS only

You can see the results below.

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

Angular image slider example

Angular image slider example

You can see the results below.

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

jQuery slideshow

jQuery slideshow

You can see the results below.

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

Parallax slideshow codepen

Parallax slideshow codepen

You can see the results below.

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

Slick slider jQuery

Slick slider jQuery

You can see the results below.

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

PURE CSS SLIDESHOW

PURE CSS SLIDESHOW

You can see the results below.

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

Automatic slideshow JavaScript

Automatic slideshow JavaScript

You can see the results below.

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

You can see the results below.

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

Vanilla javascript slideshow

Vanilla javascript slideshow

You can see the results below.

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

You can see the results below.

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

GSAP carousel slider

GSAP carousel slider

You can see the results below.

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

Slideshow animation JavaScript

Slideshow animation JavaScript

You can see the results below.

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

SlideShow Animated

SlideShow Animated

You can see the results below.

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

JavaScript split screen slider

JavaScript split screen slider

You can see the results below.

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

Automatic slideshow html

Automatic slideshow html

You can see the results below.

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

OwlCarousel Slideshow

OwlCarousel Slideshow

You can see the results below.

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

Simple html javascript slideshow

simple html javascript slideshow

You can see the results below.

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

Transition images slideshow javascript

Transition images slideshow javascript

You can see the results below.

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

Slideshow gallery HTML

Slideshow gallery HTML

You can see the results below.

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

CSS slideshow automatic

css slideshow automatic

You can see the results below.

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

Slideshow HTML CSS

Slideshow HTML CSS

You can see the results below.

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

Responsive image slideshow css

Responsive image slideshow css

You can see the results below.

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

Summary:

Through this, I hope the article will provide you with useful slideshows for development, web design and if you have any questions just send an email I will respond as soon as possible. Hope you continue Please support the website so that I can write more good articles. Have a nice day!