Support the ongoing development of Laravel.io →
Installation Views Blade
Last updated 1 year ago.
0

you should just go ahead and post your question. i'm sure people would post and answer.

0

ok cool, thanks.

In my slider I have a couple of navigation dots. Everytime you go to a new slider the next dot becomes blue which means it's active. The problem I'm having is that when I go to the next slide all my dots become inactive.

My HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-wrapper">
<div class="banner_wrapper active_banner" style="opacity: 1; left: 0%;">
  <img class="bgwidth" src="http://i.imgur.com/YW5Y1YX.jpg";>
</div>
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: 100%;">
  <img class="bgwidth" src="http://i.imgur.com/vFEg6ef.jpg";>
</div>
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: -100%;">
  <img class="bgwidth" src="http://i.imgur.com/cEcFlSA.jpg";>
</div>
<a class="left-arrow nav_arrows" href="javascript:void(0);">
  <img src="http://i.imgur.com/6UVHSG4.png";>
</a>
<a class="right-arrow nav_arrows" href="javascript:void(0);">
  <img src="http://i.imgur.com/pbt7K94.png";>
</a>
<div class="banner-nav-wrapper">
  <a class="active_inside" href="javascript:void(0);">
    <span></span>
  </a>
  <a class="inactive_inside" href="javascript:void(0);">
    <span></span>
  </a>
  <a class="inactive_inside" href="javascript:void(0);">
    <span></span>
  </a>
</div>

My CSS

.banner_wrapper img{
   position: absolute;
  }

  .banner-nav-wrapper {
  left: 46%;
  position: absolute;
  top: 80%;
  }

  .banner-nav-wrapper a{
  display:block;
  width:13px;
  height:14px;
  background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat;
  float:left;
  margin:0 5px 0 0;
  }

  .banner-nav-wrapper a.active_inside span{
  display:block !important;
  background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat;
  width:100%;
  height:100%;
  }

  .banner-nav-wrapper a.inactive_inside span{
  display:block !important;
  background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat;
  width:100%;
  height:100%;
  }

  .banner-nav-wrapper a span{
  display:none;   
  width:100%;
  height:100%;
  background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat;
  }


  .left-arrow {
  background: none repeat scroll 0 0 black;
  left: 5.2%;
  position: absolute;
  top: 27%;
  z-index: 1;
  }

  .left-arrow img{
  position: relative;
  }

  .right-arrow {
  background: none repeat scroll 0 0 black;
  position: absolute;
  right: 5.2%;
  top: 27%;
  }

  .right-arrow img{
  position: relative;
  }

My JS

$(".nav_arrows").click(function(){

  $direction = ($(this).hasClass("left-arrow") ? "left" : "right");
  var activeBanner = 100;

  if($direction == "right"){
    $(".inactive_banner").css("left","100%").show();
    activeBanner = -100;
    if($(".active_banner").next(".banner_wrapper").length < 1){
      $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_banner").removeClass("inactive_banner");
      });
      $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");
    }else{
      $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_banner").removeClass("inactive_banner");
      });
      $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");        
    }
  }else{ //left
    $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
    if($(".active_banner").prev().length < 1){
      $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_banner").removeClass("inactive_banner");
      });
      $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");        
    }else{
      $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
        $(this).addClass("active_banner").removeClass("inactive_banner");
      });
      $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");        
    }
  }

  $(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){
    $(this).addClass("inactive_banner").removeClass("active_banner");
    $(".banner-nav-wrapper a").addClass("inactive_inside").removeClass("active_inside");      
  });
});

and here is a link to a demo: http://codepen.io/anon/pen/qEZOyG

0

I realise this isnt a solution to your code but why not rather use a jQuery plugin? http://docs.dev7studios.com/jquery-plugins/caroufredsel is a highly customisable plugin that would allow you to do all you want without reinventing the wheel :) I also like this particular plugin because of the event handling features and the animation smoothness.

Cycle is a more popular plugin but ive seen it have performance issues in Firefox and it doesnt handle events but you could also consider it.

0

Sign in to participate in this thread!

Eventy

Your banner here too?

shiva shiva Joined 24 Jul 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.