How To Create  Image Slider Tutorial step by step using Html, CSS and JavaScript

In this tutorial, we will be building a slider tutorial with coding and free download code also . There are a lot of different available JavaScript sliders you can learn a lot by creating your own and in this JavaScript mini or tiny slider tutorial technique and using HTML and CSS and some JavaScript codes.

Body Code:

  

  
  <header>
     <section class="hero-slider">
       
        <div class="single-slider">
            <div class="container">
                <div class="row ">
                    <div class="col-lg-6 co-12">
                        <div class="home-slider">
                            <div class="hero-text">
                                <span class="small-title wow fadeInUp" data-wow-delay=".3s">Dailyaspirants.com</span>
                                <h1 class="wow fadeInUp" data-wow-delay=".5s"><span>We Provide Quality</span><br>
                                    We design</h1>
                                <p class="wow fadeInUp" data-wow-delay=".7s">Dailyaspirants are the online learning platform <br> We know you are unique, and we make sure your is too!
                                    <br>Once your design is ready, we'll turn your code into reality.</p>
                                <div class="button wow fadeInUp" data-wow-delay=".9s">
                                    <a href="aboutus.php" class="btn mouse-dir">Let's Meet Us..!<span
                                            class="dir-part"></span></a>
                                </div>
                            </div>
                            <div class="hero-text">
                                <span class="small-title">dailyaspirants.com</span>
                                <h1><span>See. </span><br> Touch.<br>Experience.</h1>
                                <p>Come to our Experience Centre and get a look and feel of what we do!</p>
                                <div class="button">
                                    <a href="portfolio.php" class="btn mouse-dir">Discover More <span
                                            class="dir-part"></span></a>
                                </div>
                            </div>
                            <div class="hero-text">
                                <span class="small-title">dailyaspirants.com</span>
                                <h1><span>Looking for design</span><br> inspiration?</h1>
                                <p>Stay updated with the latest design trends! <br>looks that we've curated specially for you.</p>
                                <div class="button">
                                    <a href="portfolio.php" class="btn mouse-dir">Discover More <span
                                            class="dir-part"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
    </section>
 
    </header>
  
  
  

  

  
  <script type="application/javascript" src="js/bootstrap.min.js"></script>
  <script type="application/javascript" src="js/wow.min.js"></script>
  <script type="application/javascript" src="js/tiny-slider.js"></script>
  
  

Script Code:

<script type="application/javascript">
        
        var slider = new tns({
            container: '.home-slider',
            slideBy: 'page',
            autoplay: false,
            mouseDrag: true,
            gutter: 0,
            items: 1,
            nav: true,
            controls: false,
            controlsText: [
                '<i class="lni lni-arrow-left prev"></i>',
                '<i class="lni lni-arrow-right next"></i>'
            ],
            responsive: {
                1200: {
                    items: 1,
                },
                992: {
                    items: 1,
                },
                0: {
                    items: 1,
                }

            }
        });

      
    </script>

Css Style Code:

  
  
  .hero-slider {
  position: relative;
  background: #3e54ff08;
}

.hero-slider .single-slider {
  height: 600px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-slider .single-slider::before {
  position: absolute;
  content: "";
  right: 0;
  width: 50%;
  background-image: url(../img/heroslider.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  height: 100%;
  top: 0;
  z-index: -1;
  border-radius: 0;

}

.hero-slider .hero-text {
  float: none;
  margin-top: 150px;
}

.hero-slider .hero-text .small-title {
  color: #fff;
  background: #037ffc;
  font-size: 15px;
  padding: 5px 18px;
  display: inline-block;
  margin-bottom: 15px;
}

.hero-slider .hero-text h1 {
  color: #333;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 25px;
}

.hero-slider .hero-text h1 span {
  font-weight: 300;
}

.hero-slider .hero-text p {
  color: #666;
  font-size: 14px;
}

.hero-slider .hero-text .button {
  margin-top: 35px;
}

.hero-slider .hero-text .button .btn {
  color: #333;
  background: transparent;
  border: none;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  border: 2px solid #333;
}

.hero-slider .hero-text .button .btn {
  margin-right: 10px;
}

.hero-slider .hero-text .button .btn .dir-part {
  background-color: ##037ffc;
}

.hero-slider .hero-text .button .btn:hover {
  border-color: #037ffc;
  color: #037ffc;
}

.hero-slider .hero-text .button .btn:last-child {
  margin-right: 0px;
}

.hero-slider .hero-image {
  margin-top: 175px;
}


/* Slider Dots*/
.hero-slider .home-slider {
  position: relative;
}

.hero-slider .tns-nav {
  background: #037ffc;
  display: inline-block;
  padding: 8px 20px 8px 20px;
  border-radius: 3px;
  position: absolute;
  left: -30px;
  top: 260px;
  transform: rotate(90deg);
  border-radius: 12px 12px 0px 0;
  z-index: 9;
}

.hero-slider .tns-nav button {
  width: 10px;
  height: 10px;
  border-radius: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0;
  background: #fff;
  display: inline-block;
  border: none;
  margin-right: 9px;
  border-radius: 30px;
}

.hero-slider .tns-nav button:last-child {
  margin: 0;
}

.hero-slider .tns-nav button.tns-nav-active {
  width: 20px;
}
  
  

so, we are now creating our html css javascript image slider step by step and now create two empty file for html and css and pass the code for image slider and paste the code and test  by the browser.

• Download Link