Ad

Slideshow Pagination Javascript/Jquery With No Plugins

- 1 answer

Code here https://jsfiddle.net/bbayo/gmvex82e/4/

I want to make a pagination slideshow out of the menu like (skinny, straight, flare) give the slideshow a control example arrows and x to close. I did something but get stuck.

Right now if you click on skinny you will get a slideshow but if you instead click on straight or boyfriend it gives you the content but no arrows.

check it here https://jsfiddle.net/bbayo/gmvex82e/4/

<div class="denim-destination-container">
  <div class="denim-destination-content">
    <div class="fits">
    </div>
  </div>
<div>

Any help is appreciated. Thank you

Ad

Answer

1.Your post didn't show your entire code to figure out what you're facing and others can't understand what you want to ask.(Although you post the code in jsfiddle, but what you post here is simple html and it's not clear enough for others to understand your question)

2.Why your control arrows and close button didn't show is because your .hide contains your control

<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper" >
    <div id="skinny" class="macysSlide show">
        <div class="slide-container">
            <img src="xxx.jpg" alt="" />
        </div>
    </div>
    <!-- and more divs -->
</div>
<div class="denim-close " id="x-img">
    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#fits"><img src="xxx"/></a>
</div>
<div class="arrow" id="arrow_right">
    <img src="xxx"/>
</div>
<div class="arrow" id="arrow_left">
    <img src="xxx"/>
</div>

and your javscript control show only your slider div but not your control div.

$(".link").click(function() {    
$(".hide").hide();
var dataType = $(this).attr('data-type');
   $("#" + dataType).show();
});

here is the fixed code.

check the html and javascript section.

$(document).ready(function() {
  $(".link").click(function() {
    $(".hide").hide();
    $(".control").show();
    var dataType = $(this).data('type');
    $("#" + dataType).show();
  });

  var currentPosition = 0,
    counter = 0,
    slideWidth = 886,
    slides = $('.macysSlide'),
    numSlides = slides.length,
    selectedClass;

  function displayArrows(position) {

    for (var i = 0; i < numSlides; i += 1) {
      if (i == position) {
        $(".activeslide").remove();
      } else {
        $("li.navPos" + i).css('color', '#8a8a8a');
      }
    }
  }

  function moveSlide() {
    console.log(slideWidth);
    console.log(currentPosition);
    $('#macysSlideshowWrapper').animate({
      'margin-left': (slideWidth * -currentPosition)
    })
  }

  $('.arrow').click(function() {
    currentPosition = parseInt(currentPosition);
    if ($(this).attr('id') == 'arrow_right') {
      if (currentPosition == (numSlides - 1)) {
        currentPosition = 0;
      } else {
        currentPosition = currentPosition + 1;
      }
    } else if ($(this).attr('id') == 'arrow_left') {
      if (currentPosition == 0) {
        currentPosition = numSlides - 1;
      } else {
        currentPosition = currentPosition - 1;
      }
    }

    displayArrows(currentPosition);
    moveSlide();
  });

  displayArrows(currentPosition);

  $(".fits-bottom-nav li").click(function() {
    moveSlide();
    //            selectedClass=$(this).attr('class');
    //            console.log('selectedClass', selectedClass);
    //            currentPosition = selectedClass[6];
    currentPosition = $(this).find("a").data('index');
    console.log('currentPosition', currentPosition);
    displayArrows(currentPosition);
    moveSlide();
  });

  $(".control").hide();

});
ul {
  margin: 0 0 1.5em;
  /* 24 / 16 */
  padding: 0;
}
li {
  line-height: 1.5;
  /* 24 / 16 */
  margin: 0;
  display: inline-block;
  cursor: pointer;
  padding: 32px;
}
.denim-destination-container {
  width: 900px;
  margin: 0 auto;
  line-height: 0;
}
.denim-nav ul li a.active {
  color: yellow;
}
.denim-destination-content {
  border-top: 7px solid #34496C;
  border-right: 7px solid #34496C;
  border-left: 7px solid #34496C;
  width: 886px;
  height: 2532px;
}
/* fits styles */

.fits,
.washes {
  position: relative;
}
.fits-top-nav {
  position: absolute;
  top: -22px;
  left: 50px;
}
.fits-top-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  margin: 5px;
}
.fits-top-nav li a:hover {
  color: yellow;
}
.fits-bottom-nav {
  position: absolute;
  top: 576px;
  left: 34px;
}
.fits-bottom-nav li a {
  color: #485977;
  text-decoration: none;
  font-size: 14px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  margin-left: -8px;
}
.fits-bottom-nav .active a {
  background-color: #ccc !important
}
.washes-top-nav {
  position: absolute;
  top: 512px;
  left: -17px;
}
.washes-top-nav li {
  line-height: 18px;
  margin-left: 20px
}
.washes-top-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  margin: 5px;
}
/* slide styles */

#macysSlideshow {
  /*width and height of the slides go here*/
  height: 636px;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  top: 173px;
  clear: both;
}
#macysSlideshowWrapper {
  /*width of all the slides combined (slidesWidth * 3) goes here*/
  /* width:6300px;
         height:636px;*/
}
.macysSlide {
  /*slide with and height goes here*/
  width: 886px;
  height: 636px;
  float: left;
  position: relative;
  margin: 0;
}
.slide-container {
  position: relative;
  display: inline-block;
  float: left;
  width: 886px;
}
.arrow,
.denim-close {
  position: absolute;
  cursor: pointer;
}
/*add left and right arrow positioning*/

#arrow_left {
  top: 30%;
  left: 15px;
  padding-top: 1px;
  z-index: 100;
}
#arrow_right {
  top: 30%;
  left: 855px;
  padding-top: 1px;
  z-index: 100;
}
#x-img {
  top: 1%;
  left: 850px;
  padding-top: 1px;
  z-index: 100;
}
/* BRANDS STYLE */

#brands {
  position: relative;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #34496c;
  margin-top: 205px;
}
.brand-content {
  position: absolute;
  top: 200px;
  left: 400px;
}
.dotted {
  border-bottom: 3px dashed #34496c;
  text-decoration: none;
  font-size: 20px;
}
.brands-list li {
  display: inline;
}
.brands-list a {
  display: inline-block;
  padding: 5px;
  margin-right: 55px;
  color: #34496c;
}
.new-noteworthy-list {
  width: 611px;
  margin-top: 25px;
  margin-left: -25px;
}
.all-time-fav-list {
  width: 580px;
  margin-top: 25px;
  margin-left: -25px;
}
/* how to wear it styles */

label,
a {
  color: teal;
  cursor: pointer;
  text-decoration: none;
}
#slider {
  margin: 0 auto;
}
/* NEW EXPERIMENT */

/* Slider Setup */

input {
  display: none;
}
#slide1:checked ~ #slides .inner {
  margin-left: 0;
}
#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
  margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
  margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
  margin-left: -600%;
}
#overflow {
  overflow: hidden;
  height: 774px;
}
article img {
  width: 100%;
}
#slides .inner {
  width: 700%;
  line-height: 0;
}
#slides article {
  /*width: 20%;*/
  float: left;
}
/* Control Setup */

#controls {
  margin: -29.9% 0 0 0;
  width: 100%;
}
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
}
#active {
  /*margin: 20% 0 0;*/
  text-align: center;
  position: absolute;
  margin-left: 250px;
  margin-top: 175px;
}
#active label {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  margin-left: 35px;
}
#active label:hover {
  background: #eacf54;
  border-color: #777 !important;
}
#controls label {
  opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
  background: url('../images/denim-right-arr-01.png') no-repeat;
  float: right;
  margin: -190px -20px 0 0;
  display: block;
}
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
  background: url('../images/denim-left-arr-01.png') no-repeat;
  float: left;
  margin: -190px 0 0 15px;
  display: block;
}
#slide1:checked ~ #active label:nth-child(1) {
  display: none;
}
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),
#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7) {
  background: #eacf54;
  border-color: #eacf54 !important;
}
/* Animation */

#slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
}
#slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
#controls label {
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
/*washes styles*/

.washes-content {
  position: absolute;
  top: 235px;
  left: 175px;
}
.hide {
  display: none;
}
.show {
  display: block;
}
#dw {
  position: absolute;
  left: 150px;
}
#ww {
  position: absolute;
  left: 200px;
}
#bw {
  position: absolute;
  left: 10px;
}
#gw {
  position: absolute;
  left: 160px;
}
#mw {
  position: absolute;
  left: 295px;
}

`HTML`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="denim-destination-container">
  <div class="denim-destination-content">
    <div class="fits">
      <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-02a.jpg" alt="" />
      <div id="macysSlideshow" class="hide">
        <div id="macysSlideshowWrapper">
          <div id="skinny" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-04a.jpg" alt="" />
            </div>
          </div>
          <div id="straight" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-05a.jpg" alt="" />
            </div>
          </div>
          <div id="boyfriend" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-06a.jpg" alt="" />
            </div>
          </div>
          <div id="bootcut" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-08a.jpg" alt="" />
            </div>
          </div>
          <div id="cropped" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-07a.jpg" alt="" />
            </div>
          </div>
          <div id="flare" class="macysSlide show">
            <div class="slide-container">
              <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-09a.jpg" alt="" />

            </div>
          </div>
        </div>
      </div>
      <div class="control">
        <div class="denim-close " id="x-img">
          <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#fits">
            <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-close.png" />
          </a>
        </div>
        <div class="arrow" id="arrow_right">
          <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-right-arr.png" />
        </div>
        <div class="arrow" id="arrow_left">
          <img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-left-arr.png" />
        </div>
      </div>
      <nav class="fits-top-nav denim-nav">

        <ul>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#fits">FITS</a>
          </li>
          <!--
				     -->
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#washes">WASHES</a>
          </li>
          <!--
				     -->
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#how-to-wear">HOW TO WEAR IT</a>
          </li>
          <!--
				     -->
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#brands">BRANDS</a>
          </li>
          <!--
				     -->
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">SHOP ALL DENIM</a>
          </li>
        </ul>
      </nav>
      <nav class="fits-bottom-nav">
        <ul>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#skinny" data-index="0" data-type="macysSlideshow" class="link">SKINNY</a>
          </li>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#straight" data-index="1" data-type="macysSlideshow" class="link" style="margin-left: 13px;">STRAIGHT</a>
          </li>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#boyfriend" data-index="2" data-type="macysSlideshow" class="link" style="margin-left: 7px;">BOYFRIEND</a>
          </li>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#bootcut" data-index="3" data-type="macysSlideshow" class="link" style="margin-left: 10px;">BOOTCUT</a>
          </li>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#cropped" data-index="4" data-type="macysSlideshow" class="link" style="margin-left: 10px;">CROPPED</a>
          </li>
          <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#flare" data-index="5" data-type="macysSlideshow" class="link" style="margin-left: 18px;">FLARE</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Ad
source: stackoverflow.com
Ad