Skip to main content

Automatic And Manual Responsive Image Slider | HTML, CSS And JavaScript

by Rustcode
Automatic-And-Manual-Responsive-Image-Slider-HTML-CSS-And-JavaScript-rustcode

Again here we will discuss front-end web design. So before started with this article, we want to give you an idea about the image slider/carousel.

Image sliders (also known as image carousels/slideshows) can be a convenient way to display multiple images, videos, or graphics on your website.

You can directly represent your business ideas and vision through the image slider. Apart from this, the Image slider can draw new visitors to your website, capturing their attention immediately.

Almost every web developer wants to implement an image slider/carousel to make the website front-end more attractive and cool. You can check out our content on "Automatic image slider" and "manual image slider" (I hope you it).



In this article, we will discuss again image slider but we will see this time "Automatic And Manual Image Slider Combine". It means you can change your slide manually using buttons or it will change automatically after a constant time. let's get started with this article.


READ ALSO:


For a better understanding of image slider/carousel we divide this article into five parts, you can see all parts below:

  1. Automatic Slider
  2. Manual Slider
  3. Slider Indicator
  4. Slider Animation
  5. Responsive Design

HTML STRUCTURE

<!DOCTYPE html>
<html>
   <head>
      <title>Automatic And Manual Responsive Image Slider</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
      main content.
      <script src="script.js"></script>
   </body>
</html>

1. AUTOMATIC SLIDER


HTML

   <body>
      <div class="slider-main-container">
         <div class="slider-inner-container">
            <div class="slide active" style="background: #5C80BC;">
               <div class="image-container">
                  <img src="html.png">
               </div>
               <div class="caption-container">
                  <div class="caption">
                     <h1>HTML TUTORIALS</h1>
                     <p>Dolor suspendisse. Felis maecenas ad justo litora vehicula class. Volutpat ligula. Venenatis dis sapien platea arcu eget sociis amet pretium faucibus senectus Habitasse montes tincidunt turpis scelerisque conubia Venenatis. Orci potenti torquent torquent ultrices placerat turpis mi montes vehicula senectus. Eleifend nam dis ligula luctus pharetra. Magna. Ullamcorper proin.</p>
                     <a href="#">Learn More <i class="fa fa-angle-double-right"></i></a>
                  </div>
               </div>
            </div>
            <div class="slide" style="background: #FF8811;">
               <div class="image-container">
                  <img src="css.png">
               </div>
               <div class="caption-container">
                  <div class="caption">
                     <h1>CSS TUTORIALS</h1>
                     <p>Dolor suspendisse. Felis maecenas ad justo litora vehicula class. Volutpat ligula. Venenatis dis sapien platea arcu eget sociis amet pretium faucibus senectus Habitasse montes tincidunt turpis scelerisque conubia Venenatis. Orci potenti torquent torquent ultrices placerat turpis mi montes vehicula senectus. Eleifend nam dis ligula luctus pharetra. Magna. Ullamcorper proin.</p>
                     <a href="#">Learn More <i class="fa fa-angle-double-right"></i></a>
                  </div>
               </div>
            </div>
            <div class="slide" style="background: #00B9AE;">
               <div class="image-container">
                  <img src="js.png">
               </div>
               <div class="caption-container">
                  <div class="caption">
                     <h1>JS TUTORIALS</h1>
                     <p>Dolor suspendisse. Felis maecenas ad justo litora vehicula class. Volutpat ligula. Venenatis dis sapien platea arcu eget sociis amet pretium faucibus senectus Habitasse montes tincidunt turpis scelerisque conubia Venenatis. Orci potenti torquent torquent ultrices placerat turpis mi montes vehicula senectus. Eleifend nam dis ligula luctus pharetra. Magna. Ullamcorper proin.</p>
                     <a href="#">Learn More <i class="fa fa-angle-double-right"></i></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script src="script.js"></script>
   </body>

CSS

body{
margin: 0px;
padding: 0px;
}
*{
box-sizing: border-box;
}
.slider-main-container{
height: 100vh;
overflow: hidden;
position: relative;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
.slide.active{
display: flex;
}
.caption-container, .image-container{
width: 50%;
height: 100%;
margin: auto;
background: #FFF;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.caption{
width: 70%;
margin: auto;
}
.caption h1{
font-size: 40px;
font-family: "Verdana", sans-serif;
font-weight: bold;
letter-spacing: -3px;
margin: 0px;
}
.slide.active .caption h1{
opacity: 0;
animation: caption-animation 0.5s ease forwards;
animation-delay: 0.6s;
}
.caption p{
font-size: 18px;
font-family: "Arial", sans-serif;
font-weight: normal;
margin: 15px 0px 30px;
text-align: justify;
}
.slide.active .caption p{
opacity: 0;
animation: caption-animation 0.5s ease forwards;
animation-delay: 0.8s;
}
.caption a{
font-family: "Arial", sans-serif;
font-weight: bold;
padding: 10px 30px;
background: #000;
color: #FFF;
text-decoration: none;
border: 3px solid #000;
}
.slide.active .caption a{
opacity: 0;
animation: caption-animation 0.5s ease forwards;
animation-delay: 1.2s;
}
.image-container{
right: 0px;
background: transparent;
}
.image-container img{
width: 260px;
height: 260px;
margin: auto;
animation: img-animation 2s ease;
}

SCRIPT

const slides = document.querySelector(".slider-inner-container").children;

let index = 0;
function autoPlay(){
  nextSlide();
  updateDotIndicator();
}
function nextSlide(){
  if (index == slides.length - 1) {
     index = 0;
  }
  else{
     index++;
  }
  changeSlide();
}
function changeSlide(){
  for(let i=0; i < slides.length; i++){
     slides[i].classList.remove("active");
  }
  slides[index].classList.add("active");
}
let timer = setInterval(autoPlay, 5000);

Youtube Video



2. MANUAL SLIDER


HTML

   <body>      
      <div class="controls">
         <div class="prev"><i class="fa fa-chevron-circle-left" style="font-size: 34px;"></i></div>
         <div class="next"><i class="fa fa-chevron-circle-right" style="font-size: 34px;"></i></div>
      </div>
      </body>

CSS

.controls .prev,
.controls .next{
position: absolute;
z-index: 2;
bottom: 20px;
margin: auto;
text-align: center;
cursor: pointer;
}
.controls .prev:hover,
.controls .next:hover{
opacity: 0.8;
}
.controls .prev{
right: 80px;
}
.controls .next{
right: 40px;
}

SCRIPT

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
function prevSlide(){
if (index == 0) {
index = slides.length - 1;
}
else{
index--;
}
changeSlide();
}
prev.addEventListener("click", function(){
prevSlide();
updateDotIndicator();
resetTimer();
})
next.addEventListener("click", function(){
nextSlide();
updateDotIndicator();
resetTimer();
})
function resetTimer(){
clearInterval(timer);
timer = setInterval(autoPlay, 5000);
}

Youtube Video



3. SLIDER INDICATOR


HTML

   <body>
      <div class="indicator"></div>
   </body>

CSS

.indicator{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 2;
}
.indicator div{
display: inline-block;
width: 25px;
height: 25px;
background: #000;
border: 3px solid #000;
border-radius: 50%;
margin: 0px 3px;
cursor: pointer;
}
.indicator div.active{
background: #FFF;
}

SCRIPT

const indicator = document.querySelector(".indicator");
prev.addEventListener("click", function(){
prevSlide();
updateDotIndicator();
resetTimer();
})
next.addEventListener("click", function(){
nextSlide();
updateDotIndicator();
resetTimer();
})
function resetTimer(){
clearInterval(timer);
timer = setInterval(autoPlay, 5000);
}
dotIndicator();
function dotIndicator(){
for(let i=0; i < slides.length; i++){
const div = document.createElement("div");
div.setAttribute("onclick", "indicateSlide(this)");
div.id = i;
if(i == 0){
div.className = "active";
}
indicator.appendChild(div);
}
}
function indicateSlide(element){
index = element.id;
changeSlide();
updateDotIndicator();
resetTimer();
}
function updateDotIndicator(){
for(let i=0; i < indicator.children.length; i++){
indicator.children[i].classList.remove("active");
}
indicator.children[index].classList.add("active");
}

Youtube Video



4. SLIDER ANIMATION


CSS

@keyframes caption-animation {
0%{
opacity: 0;
transform: translateY(100px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}
@keyframes img-animation {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

Youtube



5. RESPONSIVE DESIGN


CSS

@media only screen and (max-width: 1024px) {
.slider-main-container{
height: 90vh;
}
}
@media only screen and (max-width: 980px) {
.caption-container, .image-container{
width: 100%;
left: 0px;
top: 0px;
}
.image-container{
opacity: 0.3;
}
.caption-container{
background: transparent;
}
.caption-container h1{
font-size: 36px;
}
}
@media only screen and (max-width: 650px) {
.caption{
width: 90%;
}
.controls .prev{
right: 50px;
}
.controls .next{
right: 10px;
}
}
@media only screen and (max-width: 440px) {
.caption{
width: 95%;
}
.caption-container h1{
font-size: 34px;
}
}

Youtube



Comments

Post a Comment