How to make image slider automatically in html with swiper class?

0
votes

I have swiper-container swiper-slider class for image slide. Here the problem is, Images are not sliding automatically. I have to make image slider work automatically without clicking the next and prev button. Here is my full code. It might be help to answer. Instead of carousel her used Swiper class please help.

<!DOCTYPE html>
<html lang="en" class="wide wow-animation smoothscroll scrollTo">
  <head>
    <!-- Site Title-->
    
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="keywords" content="intense web design multipurpose template">
    <meta name="date" content="Dec 26">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <!-- Stylesheets-->
	 <link rel="stylesheet" type="text/css" href="css/theme.css">
		 <!-- Admin Forms CSS -->
  <link rel="stylesheet" type="text/css" href="css/admin-forms.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,700%7CLato:400,700'">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
		<!--[if lt IE 10]>
    <div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <script src="js/html5shiv.min.js"></script>
		<![endif]-->
		
	<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
	
	center:0;
	 text-align: center;
    background-color: transparent;
    min-width: 68px;
    <!--box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);-->
    z-index: 1;
}

.dropdown-content a:hover {background-color: #grey}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

	
		</head>



	<body>
    <!-- Page-->
    
      </header>
      <!-- Page Contents-->
      <main class="page-content">
        <!--Section Search form-->
        <section class="context-dark">
          <!-- Swiper-->
          <div data-height="33%" data-min-height="600px" data-dots="true" class="swiper-container swiper-slider" >
            <div class="swiper-wrapper">
              <div data-slide-bg="images/slide-01-1920x640.jpg" style="background-position: center center"  class="swiper-slide swiper-slide-overlay-disable"></div>
              <div data-slide-bg="images/slide-02-1920x640.jpg" style="background-position: center center"  class="swiper-slide swiper-slide-overlay-disable"></div>
              <div data-slide-bg="images/slide-03-1920x640.jpg" style="background-position: center center"  class="swiper-slide swiper-slide-overlay-disable"></div>
            </div>
            <div class="swiper-caption-wraper">
              <div class="shell section-41">
                <div class="range range-xs-center">
                  <h1 class="text-bold"></h1>
                  <div class="cell-xs-10 cell-md-7 cell-lg-6">
                  <nav>
                  <a href="b.html"></a>&nbsp;|&nbsp;
                  <a href="se.html"></a>&nbsp;|&nbsp;
                   <a href="re.html">Rnt</a>&nbsp;|&nbsp;
                    <a href="#"></a>&nbsp;|&nbsp;
                  <a href="#">Cot</a>
					<!--    
				  <div class="dropdown">
				
			
				   <div class="dropdown-content">
				<div onClick="window.location = 'rentin.html';">
                  <font size="2"> <input type="radio" name="vehicle" value="Bike">Rent-In&nbsp;  </font><br>
				 </div>
                  
				 <div onClick="window.location = 'rentout.html';">
                            <font size="2"> <input type="radio" name="vehicle" value="Bike">Rent-Out </font>
							</div>
							
                  </div>
                 
				  </div>
				   --> 
				 
                                    
                  </nav>
                   <!--  <div class="offset-top-24 offset-md-top-50 text-center">
                      Responsive-tabs
                      <div data-type="horizontal" class="responsive-tabs responsive-tabs-dashed">
                        <ul data-group="tabs-group-default" class="resp-tabs-list tabs-group-default">
                          <li><a href ="buy.html">Buy </a></li>
                          <li><a href ="sell.html">Sell </a></li>
                          <li><a href ="#">Rent </a></li>
                           <li><a href ="#">Manage </a></li>
                            <li><a href ="#">Construct</a></li>
                        </ul>
                       
                      </div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- Swiper Pagination-->
            <div class="swiper-pagination swiper-pagination-type-2"></div>
          </div>
        </section>
           <br><br><br><br>
        <!--Section Real Estate Tools and Resources-->
       
    <!-- Global Mailform Output-->
    <div id="form-output-global" class="snackbars"></div>
    <!-- PhotoSwipe Gallery-->
    <div tabindex="-1" role="dialog" aria-hidden="true" class="pswp">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button title="Close (Esc)" class="pswp__button pswp__button--close"></button>
            <button title="Share" class="pswp__button pswp__button--share"></button>
            <button title="Toggle fullscreen" class="pswp__button pswp__button--fs"></button>
            <button title="Zoom in/out" class="pswp__button pswp__button--zoom"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
          </div>
          <button title="Previous (arrow left)" class="pswp__button pswp__button--arrow--left"></button>
          <button title="Next (arrow right)" class="pswp__button pswp__button--arrow--right"></button>
          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Java script-->
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
    
     <script>
     var item_length = $('.swiper-slide > div').length - 1;
     var slider = $('.swiper-slide').slick({
         autoplay: true,
         autoplaySpeed: 1000,
         dots: true,
         infinite: true,
         speed: 1000,
         fade: true,
         slide: 'div',
         cssEase: 'linear'
     });

</script>
	 <script>
   $(document).ready(function () {
        $('.home').addClass('active');
    });
   </script>
   
  
   
	 
  </body>
</html>
2
jqueryhtmlcssbootstrap-4
Have a look at this example carousel – Habib Ur Rehman
Yes i had look into that. But i have declared swiper class in whole page. Now i can't turn into carousel. – user8558464
Are you using autoplay property? and have you added proper .js files into your code at right places? double check it. – Habib Ur Rehman
Yes. Correctly added . – user8558464
You will need to provide a more complete snippet/link with the JavaScript included for the slider, so that a working example can be tested and seen to fail. It can't be diagnosed if we have to work on the assumption that everything is definitely correctly added. – Haroon R.

2 Answers

0
votes

You need to initialize Swiper with the autoplay setting enabled in your JavaScript:

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});

Source: Swiper Parameters - Autoplay

Edit: The updated code shows that the Slick slider script is being used, but the markup is for Swiper. The HTML needs to be written according the Slick documentation, and the correct element then needs to be targeted to initialize it.

0
votes

If I've guessed it correctly, You might want to use the carousel instead of swiper class. Less fuzz and more fun.

Bootstrap Carousel

Hope it helps. -N Baua