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>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>The Terra Santa College</h3>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>Case Study number 3</h3>
+ See Full Case Study
</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
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
Related
I am using AngularJS to build a carousel with multiple items :
Now,
Each item has different (random width), and also the list of the items is random. (getting it from server).
Ofcourse it needs to be responsive, which means - the width of the item will be fixed - and when you resize it should display more/less items each.
Any recommendations for an AngularJS directive for this scenario?
Appreciate your reading, thanks.
I'd recommend: https://github.com/devmark/angular-slick-carousel
The last demo is the one which you are asking for:
https://devmark.github.io/angular-slick-carousel/#/
In your view, would need:
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
<div ng-repeat="i in YOUR_IMAGES">
<img src={i.url} style="width:{{ i.width }}px;height:100px" />
</div>
</slick>
The configuration in your controller:
$scope.slickConfig4 = {
method: {},
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
};
And after loading your data
$scope.slickConfig4Loaded = true;
I am trying to use angular-ui-swiper with AngularJS. Implementation was very easy, please see here https://www.npmjs.com/package/angular-ui-swiper
But I am not able to set more options for this slider, because I found no angular examples on the web. Can you please support me?
I am able to access the instance of the slider via "instance"-Attribute set in the html code. But I just managed to jump to a special slide. But I also want to have initially 3 slides per view for example. How can I achieve this?
Thank you
<swiper instance="instance">
<slides>
<slide ng-repeat="subpage in sliderElements">
<img src="{{subpage.featuredImage}}" alt="" title=""/>
</slide>
</slides>
<prev></prev>
<next></next>
<pagination></pagination>
</swiper>
Here are some options I need:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
https://github.com/nolimits4web/Swiper/blob/master/demos/130-centered.html
You should write each property in this form (add -):
<swiper slides-per-view="4"> this is the same like slidesPerView: 4
I want to add the slick carousel in my react app.
This is the origin code:
http://kenwheeler.github.io/slick/
I found the react-slick, but in the base code, it possible add multiple rows (responsive)
In the react-slick component this possible does not work
https://github.com/akiran/react-slick/issues/502
How can I use the slick gallery in react with all the options that exists in the origin code.
You should add the following to your settings variable:
rows: 2
slidesPerRow: 1
in your responsive settings add row=2
responsive : [{
breakpoint : 600,
settings : {
slidesToShow : 3,
slidesToScroll : 2,
rows : 2,
}
}]
I have implemented slick carousel in my react app. Please find below code :
class SimpleSlider extends React.Component {
render() {
var settings = {
dots: true,
autoplay: true,
arrows: true
};
return (
<Slider {...settings}>
<div><img src='../../src/assets/1.jpg' /></div>
<div><img src='../../src/assets/2.jpg' /></div>
<div><img src='../../src/assets/3.jpg' /></div>
<div><img src='../../src/assets/4.jpg' /></div>
</Slider>
);
}
}
If you want to add rows dynamically you can add that as well, you will need to make single row as a template in JavaScript and append it inside <Slider> component dynamically. Hope this would be helpful to you.
slick oly updating the current row not every which is been view
for eg. multiple rows 2 showing den still have to move two slides at a time but only updating 2 slides not 4
I'm working in a way to present a bi-dimensional list inside an Ionic Application (along with AngularJs). I currently have an API which outputs a json object much like the following:
[
[
{ id: 1, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/sauro/128.jpg", description: "1" },
{ id: 2, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg", description: "2" },
{ id: 3, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/k/128.jpg", description: "3" }
],
[
{ id: 4, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/jadlimcaco/128.jpg", description: "4" },
{ id: 5, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg", description: "5" },
{ id: 6, loaded: false, thumbnail: "https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg", description: "6" }
]
]
Every item on the parent array is a new array of slides (ie, items to be displayed horizontally, one at a time).
Using Ionic's list template and a couple of it's components (ionSlideBox and ionSlide), I was able to come up with the following markup:
<ion-slide-box show-pager="false" class="list" ng-repeat="row in list">
<ion-slide ng-repeat="column in row" class="item item-thumbnail-left">
<img ng-src="{{column.thumbnail}}">
<h2>{{column.description}}</h2>
<p>{{column.loaded}}</p>
</ion-slide>
</ion-slide-box>
My problem is: I need to execute code whenever a slide is activated for the first time and set the "loaded" property to true.
However, ionSlideBox's option on-slide-changed only gives me the ability to take the index of the activated slide. In my case, this doesn't really help me because even if I know the slide's index, I still need to figure out from which array it belongs.
The dimensions here are both dynamic and can be any number at any time.
You can see a sample running here:
http://plnkr.co/edit/ZdhRl2BHVkJRCtK7sQgf?p=preview
If on-slide-changed would support more parameters, I could pass the outer array index along with the selected slide index (inner array index) but I can't figure out a way to make it happen.
I appreciate any help. Thanks.
Value of on-slide-changed is an expression, which gets called when the slide changes. Because of this, you can use any function call with any parameters currently in scope. Slide box injects one more variable: index with index of the slide the slide box is sliding to.
Thus you only need the outer index, which is also already in scope, in this case from the ng-repeat directive, named $index.
Let's use it in your app:
<ion-slide-box show-pager="false" class="list" ng-repeat="row in list"
on-slide-changed="onSlideChanged($index, index)">
with handler in scope:
$scope.onSlideChanged = function(index1, index2) {
var item = $scope.lista[index1][index2];
if (!item.loaded) {
item.loaded = true;
console.log("ITEM LOADED:", item);
}
};
or even move array accessing to view:
<ion-slide-box show-pager="false" class="list" ng-repeat="row in list"
on-slide-changed="onSlideChanged(list[$index][index])">
with handler in scope:
$scope.onSlideChanged = function(item) {
if (!item.loaded) {
item.loaded = true;
console.log("ITEM LOADED:", item);
}
};
New plunker
I have a simple nesded list like
var treestore = Ext.create("Ext.NestedList", {
fullscreen: true,
updateTitleText: false,
useTitleAsBackText: false,
defaultBackButtonText: null,}
The problem is when i tap on an item it changes its own style only after a second holding, though there is need to pass that immediately
Any help will be perfect). thanks
The answer is very simple
i just had to write active atribute for the class displaing items ie :
.nav-element:active{
background:red;
}