Easy way get slide show at home page on your website

**diytools** · 30 Apr 2018, 10:37 PM

[Note: remember to include site URL, ZC version, list of plugins, PHP version, etc ... read the Posting Tips shown above for information to include in your post here. And, remove this comment before actually posting!]

I new install new version 1.5.5f. after I try to install a template want slide show, but not working.
After I try cording it by myself using tools menu modify "define_main_page" as follow:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 540px;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide4.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide5.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide6.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide7.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide8.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="/includes/languages/english/html_includes/responsive_classic/slide9.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>

</body>
</html>

**mesnitu** · 1 May 2018, 01:33 PM

Hi
There are several alternatives, etc, but you could try Swiper. Easy to implement. Lot of options.
http:idangero.us/swiper/

And then use the zencart Banner group to pull whatever you want.

PHP Code:


if ( $this_is_home_page ) {
    if ( SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2) ) {
        ?>
        <div class="swiper-container">
          <div class="swiper-wrapper">
              <?php
              if ( $banner->RecordCount() > 0 ) {
                  while ( !$banner->EOF ) {
                    echo '<div class="swiper-slide">'.zen_display_banner('static', $banner).'</div>';
                    $banner->MoveNext();
                }
            }
        }
        ?>
      </div> 
      <div class="swiper-pagination"></div> 
    </div>
<?php
}

**diytools** · 1 May 2018, 02:16 PM

Originally Posted by mesnitu

Hi
There are several alternatives, etc, but you could try Swiper. Easy to implement. Lot of options.
http:idangero.us/swiper/

And then use the zencart Banner group to pull whatever you want.

PHP Code:


if ( $this_is_home_page ) {

    if ( SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2) ) {

        ?>

        <div class="swiper-container">

          <div class="swiper-wrapper">

              <?php

              if ( $banner->RecordCount() > 0 ) {

                  while ( !$banner->EOF ) {

                    echo '<div class="swiper-slide">'.zen_display_banner('static', $banner).'</div>';

                    $banner->MoveNext();

                }

            }

        }

        ?>

      </div> 

      <div class="swiper-pagination"></div> 

    </div>

<?php

}

it is more easy ah!