Search code examples
wordpressbxslider

How to put bxSlider selector inside slide?

I've been trying to make the selectors/arrows on bxSlider move with the slides, but still don't know how to do it. I need them to be like this:

example

bxSlider's examples just shows how to put them fixed outside the slider (http://bxslider.com/examples/custom-next-prev-selectors), but when I try to put them inside the slide, they only appear on the first one.

Is there any way of doing it? I feel like I'm missing something really stupid.

Any help is appreciated! Thank you! :)

Here a link to my jsfiddle

		$('.bxslider').bxSlider({
		  auto: 'true',
		  mode: 'horizontal',
		  speed: 1000,
		  pager: false,
		  captions: true
		});
.bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1 }
.bx-wrapper img { margin: 0px; max-width: 100%; width: 1200px; height: 450px; display: block; object-fit: cover }
.bx-wrapper .bx-viewport { margin: 0 auto; text-align: center }
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100% }
.bx-wrapper .bx-prev { left: 30%; position: absolute; z-index: 9999; }
.bx-wrapper .bx-next { right: 30%; }
.bx-wrapper .bx-controls-direction a { position: absolute; top: 52%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999 }
.bx-wrapper .bx-caption { position: absolute; top: 40%; left: 0; right:0; text-align: center; width: 100%; background: none  }
.bx-wrapper .bx-caption-int { position: relative; margin: 0 auto; max-width: 33%; background: #fff; padding: 2em 1em; font-family: 'Century Gothic', sans-serif; color: #787878; }
.bx-wrapper .bx-caption-int a { text-transform: uppercase; letter-spacing: .1em; font-weight: bold; color: #787878; font-size: 1.6em; line-height: 1em; }
.bx-wrapper .bx-caption-int .bx-data { padding-top:.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<!--script src="https://code.jquery.com/jquery-1.12.4.min.js"></script-->
<div class="slide">
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Solution

  • The most expedient way to have the arrows follow each slide is to add a pair of arrows to each slide. You'll need to use the options: prevText, nextText, prevSelector, and nextSelector. Details are commented in the source of the Snippet.

    SNIPPET

    		$('.bxslider').bxSlider({
		  auto: 'true',
		  mode: 'horizontal',
		  speed: 1000,
		  pager: false,
		  captions: true,
		  /*
		  | Add the strings to next and prevText options
		  | The string will be parsed into HTML
		  */
		  nextText: '<a href="#/"><i class="fa fa-chevron-right"><i></a>',
		  prevText: '<a href="#/"><i class="fa fa-chevron-left"><i></a>',
		  /*
		  | Assign new classes to next and prevSelector options
		  | These option values must match the new HTML
		  */
		  nextSelector: '.bx-next-arrow',
		  prevSelector: '.bx-prev-arrow'
		});
    /* I didn't spend much time on the CSS, it looks like you already have that part well in hand */

.bx-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  *zoom: 1
}
.bx-wrapper img {
  margin: 0px;
  max-width: 100%;
  width: 1200px;
  height: 450px;
  display: block;
  object-fit: cover
}
.bx-wrapper .bx-viewport {
  margin: 0 auto;
  text-align: center
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%
}
.bx-prev,
.bx-next {
  display: none;
}
/*.bx-wrapper .bx-prev {
  left: 30%;
  position: absolute;
  z-index: 9999;
}*/

/*.bx-wrapper .bx-next {
  right: 30%;
}*/

/*.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 52%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999
}*/

.bx-wrapper .bx-caption {
  position: absolute;
  top: 45%;
  left: 25%;
  text-align: center;
  width: 50%;
  height: 10%;
  background: transparent !important;
}
.bx-wrapper .bx-caption-int {
  position: relative;
  margin: 0 auto;
  max-width: 33%;
  background: #fff;
  padding: 2em 1em;
  font-family: 'Century Gothic', sans-serif;
  color: #787878;
}
.bx-wrapper .bx-caption-int a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: bold;
  color: #787878;
  font-size: 1.6em;
  line-height: 1em;
}
.bx-wrapper .bx-caption-int .bx-data {
  padding-top: .5em;
}
.bx-nav {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 200px;
  margin: 10px calc(50% - 100px) 0;
}
.bx-prev-arrow,
.bx-next-arrow {
  border-radius: 50%;
  background: rgba(0, 112, 255, .5);
  width: 32px;
  height: 28px;
  display: inline-block;
  padding-top: 4px;
}
.fa {
  color: rgba(255, 255, 255, .3);
  font: 400 36px/36px;
}
    <link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>

<!--Font-Awesome Stylesheet-->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js'></script>
<div class="slide">
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>

          <!--
         Add nav.bx-nav, div.bx-prev-arrow, and
         div.bx-next-arrow to each slide. The classNames
         .bx-next-arrow and .bx-prev-arrow need to be
         in the option: next and prevSelector
          -->

          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
      <div class="bx-caption">
        <div class="bx-caption-int">
          <div class="bx-titulo">Post Title</div>
          <nav class='bx-nav'>
            <div class='bx-prev-arrow'></div>

            <div class='bx-next-arrow'></div>
          </nav>
          <div class="bx-data">02.08.16</div>
        </div>
      </div>
    </li>
  </ul>
</div>