bxslider

问题 I'm trying to figure out how to slide custom captions outside of bx-slider class. I only found answers similar to this here, where it uses the image attribute, but my problem is I want to be able to slide a caption along with the image inside a div, separate from bx-slider, if that's possible. So far I have this: HTML: <!--image slider desktop--> <div id="hero"> <ul class="bxslider"> <li> <a href="www.google.com"> <img src="http://placehold.it/350x150" class="slider-img-responsive"> </a> </li

问题 I have this bxslider code. $(function(){ $('#slider1').bxSlider({ infiniteLoop: false, hideControlOnEnd: true }); }); and ihave this ajax code: $(function () { $.get('/Scripts/PagedList/PagedList.Mvc.Template.html', function (pagerTemplate) { // get template for pager // create our pager control object var pagedList = $.pagedList( $.template(null, pagerTemplate), // convert into compiled template function(pageNumber){ return '/home/ajax/#' + pageNumber; // give the pager control the url for

问题 I am using angularjs in my application where I have created a directive for bxslider. Below is code of directive: angular.module('sbAdminApp') .directive('bxSlider', function(){ return{ restrict: "A", require: "ngModel", link: function(scope, element, attrs, ctrl){ element.ready(function(){ $($(element[0])).bxSlider({ maxSlides:1, auto:true, controls:false, pager:true }); }) } } }) Above I am using like this $($(element[0])).bxSlider({ after ready function as I search for a problem where

问题 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. 回答1: There is an option of bxslider called "pager" that can take boolean true / false. Use the code below: $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); 回答2: first load the bxSlider as usual, $(document).ready(function(){ $('.bxslider').bxSlider(); }); then

问题 I'm working on a Angular js project where I get number of terms and i'm using ng repeat to show each term in the front end . it works fine .I have shown them in a bx slider (jquery responsive bxslider) Following will be the main code. Javascript code <script type="text/javascript"> $(document).ready(function(){ $('.slider4').bxSlider({ slideWidth: 300, minSlides: 2, maxSlides: 3, moveSlides: 1, slideMargin: 10 }); }); </script> HTML code <div class="slider4"> <div ng-repeat="term in terms" >

问题 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 the browser(even just for a pixel) the viewport height gets calculated correctly and everything looks fine. But if I refreshed the page with same height and width bx-viewport wouldn't be correctly calculated. Any idea why this is happening? HTML

问题 I want to change the max number of slides on the bxslider for when my screen is below 430px. I could use the below but this seems like overkill having to declare everything twice. Is there any other way that someone could think of? if ( $(window).width() < 430) { var myslider = $('#my-slider').bxSlider({ ... maxSlides : 1, }); } else { var myslider = $('#my-slider').bxSlider({ ... maxSlides : 4, }); } 回答1: You can make things less repetitive by setting a maxSlides variable, rather than

问题 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? 回答1: You can add following css. .bx-wrapper, .bx-viewport { height: 200px !important; //provide height of slider } Check out this fiddle..bxslider 回答2: Why not style the elements? If you set a fix height for the wrapper you could get in trouble with overflows and positioning. If you are using

问题 Actually this should be trivial but I can't get it to work I'm using this nice jquery plugin bxslider for the slides of the images and the images are different in size. When the images render in the browser they are aligned to the top-line I want them to be aligned in the middle. Image of the condition <article id='customers'> <div class='wrapper'> <div class='container'> <div class='col-md-12 col-sm-12'> <h1 class='text-center'> Happy Customers...... </h1> <ul class='bxslider'> <li><span

问题 I am using the bxslider. It works very well for me, but I have 1 problem. I want the captions outside of the bxwrapper. The html of the slider looks like this only the div captions is created by me <div class="captions"></div> <ul class="bxslider"> <li><img src="images/1.jpg" title="headline, text" /></li> <li><img src="images/1.jpg" /></li> <li><img src="images/1.jpg" title="text" /></li> <li><img src="images/1.jpg" title="text" /></li> </ul> The captions are generated out of the title from