Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Antonis Martalis
Antonis Martalis
1,506 Points

Bxslider Changing images

Hello and thank you in advance! My problem is that i dont know how i can make bxslider change content when i click a button

Im Trying to Hide the bxsliders to workaround it and still its not working.

Anyone has any ideas,Sites to recoment?

Thank you!

This works but the slider keeps taking space at the side i wont to completely hide it!

$(document).ready(function(){
   $('.bxslider1').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true,
  onSliderLoad: function() {
                $('.bxslider1').hide();
            }
    });
});

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I've never used this plugin before, but I scanned the docs first.

What button do you want to the slider to change content on? Are you just trying to use the default buttons, or are you trying to add in a custom button that causes the slider to change?

They do give you a .goToNextSlide() and a .goToPrevSlide method, that you could use on a custom button click to cause it to happen.

Also, just a side note. The jQuery .hide() just hides the element from the page, but it does still physically take up space on the page. You'd want to use the .remove() method to actually make is disappear.

Antonis Martalis
Antonis Martalis
1,506 Points

The buttons is not the issue the problem is that i have 2 buttons and i want the slider to show 2 different images when i click button 1 and 2 different images when i click button 2. I have never done something similar so i dont know "the correct way" to do it. Il check remove and come back again ( and i guess with .show it will appear again?)

Antonis Martalis
Antonis Martalis
1,506 Points

.remove() has the same effect as .hide() and i cant make it work :( please help!