Below is my swiper slider initialization script.
var swiper = new Swiper('.swiper-container', {
effect: 'fade',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
height:490,
loop: true,
arrows:false,
autoplay: 4500,
autoplayDisableOnInteraction: false,
paginationBulletRender: function (index, className) {
var slide = $('.' + this.wrapperClass).find('.headermainslider')[index];
return '<span class="' + className + '"><a href="'+$(slide).attr('data-rel')+'" >' + $(slide).attr('data-value') + '</a></span>';
}
});
Each pagination bullet i have create a div and inside div anchor link is place. When i click on bullet slider will change but anchor link not works.
Due to paginationonClickable when I click on anchor link inside bullet div than anchor link not work and current slide change.
I want both condition to work. So can anyone help to resolve this issue.
Related
I have my swiper component:
<swiper [config]="slideOpts">
<ng-template swiperSlide *ngFor="let unit of Units" class="peeking-slide">
<fs-reserved-unit-card [router]="router" [activatedRoute]="activatedRoute" [doRefresh]="doRefresh" [Unit]='Unit' ></fs-reserved-unit-card>
</ng-template>
</swiper>
with slideOpts being:
slideOpts = {
slidesPerView: 'auto',
spaceBetween: 10
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
};
or:
slideOpts = {
slidesPerView: 'auto',
spaceBetween: 10
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
};
it seems that as soon as I seem to target the CSS selector it breaks, with the pagination if I have "el: x" the pagination bullets simply do not display. With the Navigation "theprevEl: x" and "nextEl: x" also does not display.
is there anything Im missing perhaps?
I believe you don't need to pass any css selectors at all as it is swiper angular component not vanilla js as far as i understand based on your code. It creates all elements and attaches all handlers itself.
Basically when you create pagination you just need to pass true or configuration and it works immediately - pagination renders without you providing classes.
Here is an example https://codesandbox.io/s/great-robinson-meeogx
I want to make mouse hover pagination on Swiper Slider. How can I do it?
Here is my javascript code;
var subSlider = new Swiper ('.subsSlider', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
})
By regular/normal CSS hover style -
.swiper-pagination-bullet:hover{
background: red;
}
$('.swiper-pagination-bullet').hover(function() {
$( this ).trigger( "click" );
});
How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoPlay() and .startAutoPlay() function but not worked for me.
thank you here is code.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 0,
loop: true,
effect: 'slide',
longSwipes: true,
autoplay:2000,
autoplayDisableOnInteraction:true,
});
$(".swiper-container").mouseenter(function(){
swiper.stopAutoPlay();
});
$(".swiper-container").mouseleave(function(){
swiper.startAutoPlay();
});
Check swiper API docs, u should use mySwiper.startAutoplay(), letter "p" is lowercase
I'm trying to make a carousel with http://unslider.com like this:
$('.carousel').unslider({
autoplay: true,
speed: 750,
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
All slides became invisible when i added the option animation: 'fade'. I cannot figure out why.
http://codepen.io/tjeu-kayim/pen/EgYYXN
I found the answer myself:
Add the css .unslider-fade {height: 100%} and the slides wil show up.
Sadly, the answer to this problem as to this date is to set a height to the unslider container. The GitHub repo of the unslider project has many questions regarding this issue, but all the answers are "add a widht and height to the container".
I guess the best css selector to use would be .unslider-fade, and I suggest you add your own class to the slider too, so it would end up looking something like .unslider-fade.your-class{height:###px;}; that way you will only affect the slider with fade in your website, in case you have any other slider working with the horizontal or vertical animation (or images with some other height).
Change your javascript a little bit:
$('.carousel').unslider({
autoplay: true,
speed: 0, //change this line(previously 750)
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
And add this to css:
.carousel ul li {
opacity: 0;
-webkit-transition: opacity .75s; // if you want 750ms
transition: opacity .75s; // if you want 750ms
}
.carousel ul li.unslider-active {
opacity: 1;
}
And that's it, now you have "fade" effect. Enjoy!
I had rendered a list using SENCHA.Now i want to navigate to different screen/load different screen upon clicking the item in LIST.
var templist = new Ext.List( {
title:"xmli",
itemTpl : '{ename}',
floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
// I need to a load different page here how ?.
// ChangePage();
}
},
hideOnMaskTap: false
}).show();
Please help me how can we achieve this using SENCHA.
Thanks,
Shyam
You need to put this list inside a layout where you can switch the visible component to your different page. It sounds like you could use the card layout:
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html