Stack Overflow
Stack Overflow

Questions tagged [bxslider]

bxSlider is a fully responsive jQuery content slider with many flexible customization features. Slides can contain images, videos or HTML

bxSlider is a fully responsive jQuery content slider with many flexible customization features. Slides can contain images, videos or HTML

Some of the features are:

  • horizontal, vertical and fade transitions
  • display and move multiple slides at once (carousel)
  • prev / next, pager, auto controls etc...

This tag should be used when asking questions related to bxSlider. Along with this tag, it is recommended to add the jQuery tag as well.

Links:
website
GitHub repository

923 questions
39
votes
15 answers

How to get bxSlider to hide the slides until the page loads?

I'm building an website that uses bxSlider. As the page loads, all of the slides are visible, stacked on top of each other. Once the page is fully loaded, the first slide remains visible and the rest disappear so that the slider can animate and…
Nick Petrie
  • 4,542
  • 9
  • 36
  • 48
20
votes
2 answers

Using bxslider, is there some way to remove or hide the bullets at the bottom of the slide?

I am using bxslider to make a simple carousel, one jpg per slide. Because I have 8 jpg's, there are 8 bullets that are displayed at the bottom of each slide. Is there some way for me to remove or hide them.
Steven B
  • 209
  • 1
  • 2
  • 3
18
votes
6 answers

bxslider calculating wrong viewport size on load

Anyway I recently started using bxslider and I'm having an issue with it. It seems to calculate its viewport size wrongly on page load, which means it doesn't work well on mobile devices, tablets etc. The weird thing is, when I resize the window of…
Matija Milković
  • 2,458
  • 2
  • 13
  • 26
14
votes
10 answers

bx slider: How to continue auto sliding after clicking in default bx pager?

I want to continue the autosliding after clicking on a bx pager item. Here's the code: $(document).ready(function () { $('.bxslider').bxSlider({ mode: 'horizontal', //mode: 'fade', speed: 500, auto: true, …
user2718671
  • 2,496
  • 7
  • 43
  • 79
13
votes
8 answers

BxSlider displayes last slide as first slide

I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category. The slider configuration. touchEnabled: true, hideControlOnEnd: true, …
Abhimanue Tamang
  • 580
  • 2
  • 9
  • 20
12
votes
4 answers

Links on BxSlider not working in Google Chrome but working in all other browsers

The error message on clicking is jquery.js:4388 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See…
coder
  • 575
  • 2
  • 7
  • 30
11
votes
2 answers

bxslider How is it possible to make thumbnails like a carousel?

I use this slider http://bxslider.com/examples/thumbnail-pager-1. It works, but I have a lots of elements and thumbnails don't fit on one line and move to the next line. How is it possible to do thumbnails like a carousel? I'll be very grateful to…
dakotta
  • 111
  • 1
  • 1
  • 7
11
votes
9 answers

Bxslider Setting Height

So I just started using bxslider. I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?
John Kariuki
  • 3,080
  • 5
  • 15
  • 29
11
votes
6 answers

bxslider NOT responsive when slides are wrapped inside a floated element

After testing various responsive jquery sliders, i have decided to go with bxslider. I am lost now due to a problem which i don't know how to solve. I want my bxslider (version 4.1) to be on the right side of my page html:
…
PathOfNeo
  • 1,041
  • 4
  • 21
  • 37
10
votes
6 answers

Vertically center-align div in BxSlider Carousel

I'm using bxslider script to build a carousel. I can do everything fine, I'm just having a problem trying to align to center the slides vertically, as they don't have the same height. I've tried numerous align techniques, but all seem to fail when…
CMoreira
  • 1,650
  • 1
  • 12
  • 25
10
votes
4 answers

In bxslider i want to add a class on current slide

I want to add an extra class to the current visible slide, i dont have so much knowledge of jquery i'm trying it by following code. $(document).ready(function(){ $('#slider1').bxSlider({ pager: 'true' }); …
pixel boon
  • 133
  • 1
  • 1
  • 7
9
votes
2 answers

How to fix problem with clicking event on bxSlider item in Chrome 73?

A bxSlider's inner item click event doesn't fire after Chrome has updated to version 73. How can I fire .on('click') event for elements in new Chrome? It fires in Chrome when slides are moving. Everyting is fine in FireFox
Sergey Beloglazov
  • 160
  • 1
  • 2
  • 12
9
votes
2 answers

Bxslider Plugin stops working after first "action"

I'm having some issues with this website I'm working on. I'm using Bxslider plugin to create a sort of a portfolio for the projects page BUT something's wrong with it: As soon as I click a thumbnail OR a direction arrow, the slider doesn't work…
White8Tiger
  • 302
  • 3
  • 18
9
votes
2 answers

Making BXslider full screen (filling entire browser window)

I am currently trying to implement THIS very simple content slider. I have reached a point where it is working, however using the CSS code below I need to make the slider full screen, filling the entire browser window. However I can not see where to…
DanielNolan
  • 641
  • 3
  • 10
  • 18
8
votes
1 answer

BXSlider 4 fullscreen on mobile devices: How to keep native vertical page scroll (up, down) but keep horizontal touch functionality (left,right)?

The following snippet should demonstrate the problem quite well: (function ($) { $('.bxslider').each(function() { var bxid = $(this).attr("data-bxid"); var bx = $(this).bxSlider({ auto: false, …
Blackbam
  • 12,200
  • 19
  • 71
  • 117
1
2 3
…
61 62