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
Related
Iam using swiperjs dependencies to create an amazing slider. But, I got an error while using one of API controller, which is breakpoints. I need this controller for customization the display. But, when I applied this, I got an error like this :v
error screenshot
Here is my code :
<Swiper
centeredSlides={true}
grabCursor={true}
pagination={{
dynamicBullets: true,
}}
breakpoints: {
// when window width is <= 1024px
1024: {
slidesPerView: 4,
spaceBetweenSlides: 150
},
// when window width is <= 768px
768: {
slidesPerView: 3,
spaceBetweenSlides: 200
}
}
modules={[Pagination]}
className="mySwiper"
>
{events.map((event, idx) => {
return (
<SwiperSlide>
<CardEvent
image={event.img}
info={event.info}
title={event.name}
icon={event.ico}
color="bg-white"
/>
</SwiperSlide>
);
})}
</Swiper>
Anybody can help me how to use breakpoints?
breakPoints syntax is wrong. that's why you see that error. Try the below syntax. Refernce sandbox url
breakpoints = {{
1024: {
slidesPerView: 4,
spaceBetweenSlides: 150
},
768: {
slidesPerView: 3,
spaceBetweenSlides: 200
}
}}
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'm using version 6.1.2 with react applied to Swiper in nextjs ssr environment.
<Swiper
slidesPerView={1}
loop
navigation
pagination={{
type: "bullets",
renderBullet: (index, className) => {
return `<div class="${className}">${index}</div>`;
},
clickable: true,
}}
breakpoints={{
769: {
slidesPerView: 3,
slidesPerGroup: 3,
pagination: { type: "fraction", clickable: true },
},
}}
>
When width is over 769
[pagination tpye: fraction],
When it is less than 768
I applied [tpye: bullets]
When changing options due to breakpoints
Cannot slide by touch
768<width when switching
When sliding,
the fraction page number is fixed and looping is possible only with the prev button.
There is nothing similar on Stack Overflow.
I tried with React, but the same problem occurred.
I looked at the official document but couldn't solve it.
https://swiperjs.com/react/
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 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