LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Box 1
Box 2
Box 3
Box 4
CSS
#container {
  background: grey;
  width: 496px;
  height: 300px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  white-space: nowrap;
  /*align boxes to each other*/
  overflow: hidden;
}

.fa {
  position: absolute;
  cursor: pointer;
  z-index: 10000;
}

.fa:hover {
  opacity: 0.5;
}

.fa-chevron-left {
  bottom: 150px;
  left: 10px;
}

.fa-chevron-right {
  bottom: 150px;
  right: 10px;
}

.content {
  white-space: normal;
  /*this pushes boxes down. fix it by floating boxes*/
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  /* IE 9 */
  -webkit-transform: translateY(-50%);
  /* Safari */
  transform: translateY(-50%);
  /*vertical centering*/
}

.boxes {
  width: 500px;
  height: 300px;
  display: inline-block;
  position: relative;
  margin-right: -4px;
  /*removes extra white space created by inline-block between divs*/
  right: 0px;
  text-align: center;
}


#box1 {
  background: #67D5B5;
  float: left;
  /*fixes boxes getting pushed down*/
}

#box2 {
  background: #EE7785;
}

#box3 {
  background: #C89EC4;
}

#box4 {
  background: #84B1ED;
}

ul {
  position: absolute;
}

li {
  display: inline-block;
  position: relative;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  background: black;
  z-index: 10000;
  top: 250px;
  left: 167px;
  margin-right: 10px;
  cursor: pointer;
}

li:first-child {
  background: white;
}

li:hover {
  background: white;
}
JS
$(document).ready(function() {

  function posRight() { //for circles
    switch ($(".boxes").css("right")) {
      case "0px":
        $("li#second").css("background", "white");
        $("li").not("#second").css("background", "black");
        break;
      case "500px":
        $("li#third").css("background", "white");
        $("li").not("#third").css("background", "black");
        break;
      case "1000px":
        $("li#fourth").css("background", "white");
        $("li").not("#fourth").css("background", "black");
        break;
      case "1500px":
        $("li#first").css("background", "white");
        $("li").not("#first").css("background", "black");
        break;
    }
  }

  function posLeft() {
    switch ($(".boxes").css("right")) {
      case "0px":
        $("li#fourth").css("background", "white");
        $("li").not("#fourth").css("background", "black");
        break;
      case "500px":
        $("li#first").css("background", "white");
        $("li").not("#first").css("background", "black");
        break;
      case "1000px":
        $("li#second").css("background", "white");
        $("li").not("#second").css("background", "black");
        break;
      case "1500px":
        $("li#third").css("background", "white");
        $("li").not("#third").css("background", "black");
        break;
    }
  }

  $(".fa-chevron-right").click(function() {
    if (!$(".boxes").is(':animated')) {
      //prevents slider from getting broken when user clicks too fast
      if (parseInt($(".boxes").css("right")) < 1500) {
        $(".boxes").animate({
          right: "+=500px"
        });
      } else if (parseInt($(".boxes").css("right")) === 1500) {
        $(".boxes").animate({
          right: "0px"
        });
      }
      posRight();

    }
  });

  $(".fa-chevron-left").click(function() {
    if (!$(".boxes").is(':animated')) {
      if (parseInt($(".boxes").css("right")) > 0) {
        $(".boxes").animate({
          right: "-=500px"
        });
      } else if (parseInt($(".boxes").css("right")) === 0) {
        $(".boxes").animate({
          right: "1500px"
        });
      }
      posLeft();
    }
  });

  $("li").click(function() {
    switch ($(this).attr("id")) {
      case "first":
        $(".boxes").animate({
          right: "0px"
        });
        $(this).css("background", "white");
        $("li").not("#first").css("background", "black");
        break;
      case "second":
        $(".boxes").animate({
          right: "500px"
        });
        $(this).css("background", "white");
        $("li").not("#second").css("background", "black");
        break;
      case "third":
        $(".boxes").animate({
          right: "1000px"
        });
        $(this).css("background", "white");
        $("li").not("#third").css("background", "black");
        break;
      case "fourth":
        $(".boxes").animate({
          right: "1500px"
        });
        $(this).css("background", "white");
        $("li").not("#fourth").css("background", "black");
        break;
    }
  });

});
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv