0

I'm using a simple jQuery script to implement a rotating background image on my masthead. I'd like to modify my current jQuery script to sync each background image to a corresponding bullet icon in a current slide indicator at the bottom of the page.

I know that the simplest solution would be to use a rotating banner/carousel plugin, but I need total control over the styling and behavior. Overriding the plugin's CSS and restructuring my content might be more time consuming than to expand upon what I've already got working.

I've posted a working example of my code below. I'd greatly appreciate any help with this issue. Thanks in advance!

$(document).ready(function() {
  var imgArr = new Array(
    'https://unsplash.it/1000/465?image=1',
    'https://unsplash.it/1000/465?image=2',
    'https://unsplash.it/1000/465?image=3',
    'https://unsplash.it/1000/465?image=4',
    'https://unsplash.it/1000/465?image=5'
  );

  var preloadArr = new Array();
  var i;

  for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
  }

  var currImg = 1;
  var intID = setInterval(changeImg, 6000);

  function changeImg() {
    $('#banner-image').animate({
      opacity: 0
    }, 500, function() {
      $(this).css('background', 'url(' + preloadArr[currImg++ % preloadArr.length].src + ') top center no-repeat');
    }).animate({
      opacity: 1
    }, 500);
  }
});
#rotating-banner {
  background: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
  position: relative height: 465px;
  width: 1000px;
  margin: 0 auto;
}

.call-to-action {
  background: #ccc;
  position: absolute;
  max-width: 475px;
  min-height: 135px;
  text-align: center;
  padding: 15px;
  top: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5;
}

h2 {
  color: #807862;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 5px;
}

p {
  font-size: 13px;
}

.banner-controls {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 5;
}

ul {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 27px;
  line-height: 27px;
  width: 107px;
  margin: 0 auto;
  padding: 0;
  border-radius: 5px 5px 0 0;
}

.bullet {
  display: inline-block;
  font-size: 38px;
}

.bullet a {
  text-decoration: none;
  color: #fff;
}

.bullet a.current {
  color: yellow;
}

#banner-image {
  background: url(https://unsplash.it/1000/465?image=1) no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="rotating-banner">
    <div class="call-to-action">
      <h2>Headline to go in This Area Right Here.</h2>

      <p>Lorem ipsum dolor sit amet, inceptos lorem adipiscing lacus massa donec egestas, mauris ligula hendrerit dignissim, turpis mauris, in quam voluptatibus, vel at velit vulputate elit sollicitudin ligula.</p>
    </div>

    <div class="banner-controls">
      <ul>
        <li class="bullet"><a id="banner-one" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
      </ul>
    </div>

    <div id="banner-image"></div>
  </div>
</body>
Tyler F.
  • 124
  • 1
  • 12

2 Answers2

1

Use this line to highlight the bullet once the image has switched

$(".banner-controls  a").removeClass("current").eq(index).addClass("current");

and this to change the image when bullet is clicked

$(".banner-controls  a").click(function() {
 currImg = $(this).parent().index();
 console.log(currImg);
 changeImg();
});

Example:

$(document).ready(function() {
  var imgArr = new Array(
    'https://unsplash.it/1000/465?image=1',
    'https://unsplash.it/1000/465?image=2',
    'https://unsplash.it/1000/465?image=3',
    'https://unsplash.it/1000/465?image=4',
    'https://unsplash.it/1000/465?image=5'
  );

  var preloadArr = new Array();
  var i;

  for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
  }

  var currImg = 1;
  var intID = setInterval(changeImg, 6000);

  function changeImg() {
    $('#banner-image').animate({
      opacity: 0
    }, 500, function() {
      var index = currImg++ % preloadArr.length;
      $(this).css('background', 'url(' + preloadArr[index].src + ') top center no-repeat');
      $(".banner-controls  a").removeClass("current").eq(index).addClass("current");
    }).animate({
      opacity: 1
    }, 500);
  }

  $(".banner-controls  a").click(function() {
    clearInterval(intID);
    currImg = $(this).parent().index();
    changeImg();
  });
});
#rotating-banner {
  background: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
  position: relative height: 465px;
  width: 1000px;
  margin: 0 auto;
}

.call-to-action {
  background: #ccc;
  position: absolute;
  max-width: 475px;
  min-height: 135px;
  text-align: center;
  padding: 15px;
  top: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5;
}

h2 {
  color: #807862;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 5px;
}

p {
  font-size: 13px;
}

.banner-controls {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 5;
}

ul {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 27px;
  line-height: 27px;
  width: 107px;
  margin: 0 auto;
  padding: 0;
  border-radius: 5px 5px 0 0;
}

.bullet {
  display: inline-block;
  font-size: 38px;
}

.bullet a {
  text-decoration: none;
  color: #fff;
}

.bullet a.current {
  color: yellow;
}

#banner-image {
  background: url(https://unsplash.it/1000/465?image=1) no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="rotating-banner">
    <div class="call-to-action">
      <h2>Headline to go in This Area Right Here.</h2>

      <p>Lorem ipsum dolor sit amet, inceptos lorem adipiscing lacus massa donec egestas, mauris ligula hendrerit dignissim, turpis mauris, in quam voluptatibus, vel at velit vulputate elit sollicitudin ligula.</p>
    </div>

    <div class="banner-controls">
      <ul>
        <li class="bullet"><a id="banner-one" href="#" class="current">&bull;</a></li>
        <li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
      </ul>
    </div>

    <div id="banner-image"></div>
  </div>
</body>
H77
  • 5,859
  • 2
  • 26
  • 39
  • Works great, but now I'd like to stop the animation cycle when a link is clicked. Do you have any ideas? – Tyler F. Jul 18 '17 at 03:23
0

Overriding the plugin's CSS and restructuring my content might be more time consuming than to expand upon what I've already got working.

See How can I make an image carousel with only CSS?

and restructuring my content might be more time consuming than to expand upon what I've already got working.

You can use .hover() called on .bullet selector with changeImg set as handler for mouseenter, chain .finish() to $('#banner-image') to complete previous animation

$(document).ready(function() {
  var imgArr = new Array(
    'https://unsplash.it/1000/465?image=1',
    'https://unsplash.it/1000/465?image=2',
    'https://unsplash.it/1000/465?image=3',
    'https://unsplash.it/1000/465?image=4',
    'https://unsplash.it/1000/465?image=5'
  );

  var preloadArr = new Array();
  var i;

  for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
  }

  var currImg = 1;
  $(".bullet").hover(changeImg);

  function changeImg() {
    $('#banner-image').finish().animate({
      opacity: 0
    }, 500, function() {
      $(this).css('background', 'url(' + preloadArr[currImg++ % preloadArr.length].src + ') top center no-repeat');
    }).animate({
      opacity: 1
    }, 500);
  }
});
#rotating-banner {
  background: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
  position: relative height: 465px;
  width: 1000px;
  margin: 0 auto;
}

.call-to-action {
  background: #ccc;
  position: absolute;
  max-width: 475px;
  min-height: 135px;
  text-align: center;
  padding: 15px;
  top: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5;
}

h2 {
  color: #807862;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 5px;
}

p {
  font-size: 13px;
}

.banner-controls {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 5;
}

ul {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 27px;
  line-height: 27px;
  width: 107px;
  margin: 0 auto;
  padding: 0;
  border-radius: 5px 5px 0 0;
}

.bullet {
  display: inline-block;
  font-size: 38px;
}

.bullet a {
  text-decoration: none;
  color: #fff;
}

.bullet a.current {
  color: yellow;
}

#banner-image {
  background: url(https://unsplash.it/1000/465?image=1) no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="rotating-banner">
    <div class="call-to-action">
      <h2>Headline to go in This Area Right Here.</h2>

      <p>Lorem ipsum dolor sit amet, inceptos lorem adipiscing lacus massa donec egestas, mauris ligula hendrerit dignissim, turpis mauris, in quam voluptatibus, vel at velit vulputate elit sollicitudin ligula.</p>
    </div>

    <div class="banner-controls">
      <ul>
        <li class="bullet"><a id="banner-one" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-two" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-three" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-four" href="#">&bull;</a></li>
        <li class="bullet"><a id="banner-five" href="#">&bull;</a></li>
      </ul>
    </div>

    <div id="banner-image"></div>
  </div>
</body>
guest271314
  • 1
  • 15
  • 104
  • 177