bxslider loop carousel first child issue

Question

I am using bxslider to build a nice carousel displaying 2 items at a time. this is my html:

<ul class="bxslider clearfix">
            <li>
                <span>Case Study</span>
                <h3>The London Business School</h3>
                <a href="#">+ See Full Case Study</a>
            </li>
            <li>
                <span>Case Study</span>
                <h3>The Terra Santa College</h3>
                <a href="#">+ See Full Case Study</a>
            </li>

            <li>
                <span>Case Study</span>
                <h3>Case Study number 3</h3>
                <a href="#">+ See Full Case Study</a>
            </li>
       </ul>

and this is my JS:

jQuery('#case-studies .bxslider').bxSlider({
  mode: 'horizontal',
  useCSS: false,
  moveSlides: 1,
  pager: false,
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  autoHidePager: true,
  slideMargin: 10
});

It works great and shows 2 items each click. the issue I have is that each slide has a background image of a simple line in the left side and I am trying to remove the backgroun from the first item only.

I was thinking I can use last-child in my li item like so:

#case-studies .bxslider li:first-child {
  background: none !important;
}

but after I checked on the site the bxslider loop animation clones the number of the slides you have in order to create a loop and the first hcild isn't necassary the one you see..

anyway I can add a class to the first item that appears? Thanks

add your problem to this [fiddle](http://jsfiddle.net/cky8n6w2/) — Cerlin, Nov 17 '14 at 06:48
Well this is it.. thanks for adding my script to Fiddle. how do I make the first slide "The London Business School" assigning a "first-child" property so I can gie it a style? — gil hamer, Nov 17 '14 at 07:03
Also, while already there.. is there a way of not displaying the first left arrow at start and also in the end? — gil hamer, Nov 17 '14 at 07:03

Cerlin · Accepted Answer · 2014-11-17T09:40:07.387

0

To remove the left and right arrows at respective ends you have to add two more options in the initializing script. After adding the final code will look like

var slider = $('.bxslider').bxSlider({
    mode: 'horizontal',
    useCSS: false,
    moveSlides: 1,
    pager: false,
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 360,
    autoHidePager: true,
    slideMargin: 10,
    infiniteLoop : false, // Newly added code
    hideControlOnEnd : true, // Newly added code
    onSliderLoad : function(currentIndex){
        $('.bxslider li').removeClass('current');
        $('.bxslider li').eq(currentIndex).addClass('current');
    },
    onSlideAfter : function($element){
        $('.bxslider li').removeClass('current');
        $element.addClass('current');
    }
});

To get the first slide in the view you have to run the script below

$('.bxslider li').eq(slider.getCurrentSlide())

NOTE: this code will work only if you have passed infiniteLoop : false and hideControlOnEnd : true while initializing the slider.

HINT:The slider doesn't clone the elements if hideControlOnEnd option is true .

UPDATE:

Check out this fiddle

Leave a comment if you have any doubts

edited Nov 17 '14 at 09:40

answered Nov 17 '14 at 07:33

Cerlin

6,622
1
20
28

Thanks a lot @Cerlin Boss the thing is: I do want to keep the loop and get the current slide as well as remove the left and right arrows at respective ends.. I used your script by the way and the currentSlide worked, however the first 2 additional newly lines didn't make the left arrow and te right arrow disappear at respective ends. Is it possible at all to keep the loop and get the first slide, remove arrows etc? Thanks – gil hamer Nov 17 '14 at 08:51
`however the first 2 additional newly lines didn't make the left arrow and te right arrow disappear at respective ends` is it? its working in this [fiddle](http://jsfiddle.net/cky8n6w2/3/). also if the infinite loop is true and arrows are hidden, how it will be infinite anymore? it ill be stuck in the last slide since there is not option for user to navigate to next. – Cerlin Nov 17 '14 at 08:59
It is working now. I was missing the "disabled" class. you are right about your opinion. if I can only get the first slide that appears to add a "current" class to it and using the loop it will be great. is that possible you think? – gil hamer Nov 17 '14 at 09:13
i have a question. if the controls are hidden then how the loop is suppose to work? what i mean by that is, by hiding the controls there wont be a next button on the last slide, how does it loops? – Cerlin Nov 17 '14 at 10:14
You didn't understand me. I understand your point regarding the arrows and the infinite loop. I agree with you. I just want to add a current class to the first slide and keep the loop. I am not talking about the arrows anymore just a current class to the first slide. please let me know if it's possible – gil hamer Nov 17 '14 at 10:28
Amazing answer. Thanks a lot! I was thinking maybe you can help with another issue I had and nobody could help here: http://stackoverflow.com/questions/26906950/bxslider-change-2-sliders-at-one-click I will apreciate it a lot. Thanks – gil hamer Nov 17 '14 at 13:06

bxslider loop carousel first child issue

1 Answers1