-2

I am trying to implement a background image slider in my webpage (15 images) and it only allows for 4 images and then flashes back to the beginning. I can see what it is doing, its creating multiple sliders of 4-5 images each. how can I make it so that its just one slider with 15 images. Code below...

HTML/ASP:

<%@ Page Title="Count" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PatientCounter._Default" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - </title>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<%--<link rel="stylesheet" href="/css/style.css" />--%>
<link rel="stylesheet" href="Content/Site.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="~/Content/flipclock.css"/>
<script src="Scripts/flipclock.js"></script>

<style>
    @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }

    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
        background-size:cover;
        position: absolute;
        height:100%;
        width: 500%;
        margin: 0;
        bottom:0;
        top: 0;
        left: 0;
        text-align: left;
        font-size: 0;
        animation: 30s slidy infinite; 
        overflow:hidden;
    }
</style>

<script src="Scripts/prefx.min.js"></script>

</head>
<body>
<div id="slider">

    <figure>
        <img src="Images/1_1.jpg" alt="" />
        <img src="Images/10_2.jpg" alt="" />
        <img src="Images/11_1.jpg" alt="" />
        <img src="Images/12_1.jpg" alt="" />
        <img src="Images/13_1.jpg" alt="" />
        <img src="Images/14_1.jpg" alt="" />        
        <img src="Images/15_1.jpg" alt="" /> 
        <img src="Images/16_1.jpg" alt="" />
        <img src="Images/17_1.jpg" alt="" />
        <img src="Images/2_1.jpg" alt="" />
        <img src="Images/4_2.jpg" alt="" />
        <img src="Images/6_1.jpg" alt="" />
        <img src="Images/7_1.jpg" alt="" />
        <img src="Images/8_1.jpg" alt="" />
        <img src="Images/9_1.jpg" alt="" />


    </figure>
</div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

CSS:

@font-face {
font-family: Clarice; 
src:url(../fonts/Clarice.otf);     
font-weight:bold;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body {
margin:0;
padding-top: 5px;
padding-bottom: 20px;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
background-position-y:-30px;
-webkit-background-repeat: no-repeat;
-webkit-background-size: cover;
-webkit-background-position: center;
-webkit-background-attachment: fixed;
-moz-background-repeat: no-repeat;
-moz-background-size: cover;
-moz-background-position: center;
-moz-background-attachment: fixed;
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite; 
}

h1 {
font-family: Clarice;
font-size: 100px;
color:#B21E28;
text-shadow:-2px 2px 6px #ffffff;
}
h2{
font-family: Clarice;
font-size: 100px;
color:#B21E28;
text-shadow:-2px 2px 6px #ffffff;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
z-index: -1;
position:relative;
top:1px;
}

.stick-to-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}

/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.jumbotron {
    margin-top: 20px;
}

.body-content {
    padding: 0;
}

Any help would be greatly appreciated.

3
  • Can you add a Jsfiddle, please? Aug 24, 2015 at 19:02
  • Where is the actual javascript doing the work? You have the includes in your HTML but forgot to post the JS code. Aug 24, 2015 at 19:09
  • You load two times the jQuery Lib. You have copy/paste some example that you probably don't understand what is do...
    – Aristos
    Aug 24, 2015 at 19:14

1 Answer 1

1

The idea to use CSS3 animations is good, but it will not work in browsers that lack that property. It's best to use Javascript for this. I have created a quick slider with fade effect with jquery. Basically the slider will put the active image behind the rest of the images after X secconds (4 in this case). You can put as many images as you want.

http://jsfiddle.net/rb6nrkmn/

<div id="slider">
    <figure>
        <img src="http://cdn.banquenationale.ca/cdnbnc/2013/06/ruisseau.jpg" alt="" />
        <img src="http://cdn.twitrcovers.com/wp-content/uploads/2013/07/Green-Nature-Trees-l.jpg" alt="" />
        <img src="http://etc.piktureplanet.com/wp-content/uploads/2014/11/Natural-Green-Wallpaper-for-Desktop-16.jpg" alt="" />
    </figure>
</div>

setInterval(function() {
  $("img:first-child")
    .fadeOut(500, function() {
      $(this).fadeIn(500).appendTo("#slider figure");
  });
}, 4000); 

img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: 300px;
}
#slider figure{
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 500px;
  margin: 50px auto;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.