Help for jQuery slider

Asked

Viewed 66 times

-2

For this mission, I’m out of ideas.

For more elaborate sliders use the Slider Revolution and more basic, the Wow Slider, always merging with PHP.

$(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    captions: true,
    slideWidth: 600
  });
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>

<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<div class="bxslider">
  <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

In the image it is possible to visualize what happens:

inserir a descrição da imagem aqui

On the right side there are some topics.

I need to make a slider that, instead of clicking on Bullet change, that changes when clicking on any of the topics.

jquery

  • Enter your code

  • I’ve done with the Wow Slider and the Slider Revolution. Both do not allow changing the Bullet. Only change slider there or by arrows.

  • I am using this code: https://bxslider.com/examples/image-slideshow-captions/ It is as if Bullet were the topics.

1 answer

1


You can do it with WOW Slider styling Bullets plugin natives according to the style you use in the links of your topics menu and then moving to div class="ws_bullets" into the div where the menu is.

WOW Slider has the following div where are the Bullets:

<div class="ws_bullets">
   <a href="#" title="Link 1"><span>1</span></a>
   <a href="#" title="Link 2"><span>2</span></a>
</div>

You can apply your CSS styles to <a> of that div selecting them in the CSS:

.ws_bullets a{
   ESTILOS
}

Then move the div class="ws_bullets" to the div menu:

$(window).on("load",function(){
   $(".ws_bullets").prependTo("#teste");
});

Example:

$(window).on("load",function(){
   $(".ws_bullets").prependTo("#menu"); // Substitua "#menu" pelo id do seu menu
});
.ws_bullets a{
   display: block;
}
<link rel="stylesheet" type="text/css" href="https://dvdteste.websiteseguro.com/engine1/style.css" />
<script type="text/javascript" src="https://dvdteste.websiteseguro.com/engine1/jquery.js"></script>
<div id="wowslider-container1" style="float: left;">
   <div class="ws_images">
      <ul>
         <li><a href="http://wowslider.com"><img src="https://dvdteste.websiteseguro.com/data1/images/41ijsgfvwzl._sx355_.jpg" alt="jquery slider" title="41IJsgFvWzL._SX355_" id="wows1_0"/></a></li>
         <li><img src="https://dvdteste.websiteseguro.com/data1/images/220pxbasketball.jpg" alt="220px-Basketball" title="220px-Basketball" id="wows1_1"/></li>
      </ul>
   </div>
   <div class="ws_bullets">
      <a href="#" title=""><span>Link 1</span></a>
      <a href="#" title="220px-Basketball"><span>Link 2</span></a>
   </div>
</div>	
<script type="text/javascript" src="https://dvdteste.websiteseguro.com/engine1/wowslider.js"></script>
<script type="text/javascript" src="https://dvdteste.websiteseguro.com/engine1/script.js"></script>
<div id="menu" style="display: block; width: 300px; float: left; background: #ddd; padding: 15px;"></div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.