Pagination for Swift Slider in Mobile

[ninesolutions]

Hello,

May i ask if there is anyway for swift slider to display pagination in mobile? Maybe like these dots: http://snag.gy/NdSl8.jpg

The swift slider in mobile seems just like a normal asset, and there is no hint that it is a slider.

thanks! 🙂

[Rui Guerreiro – SUPPORT]

Hi,

Will forward your suggestion to the development team.
Thansk

-Rui

[Swift Ideas – Ed]

Thanks for the request – we have made them appear by default on mobile for the next update.

– Ed

[ninesolutions]

Hello, that is really great! It is amazing to see it implemented so quickly!

How can i get them to appear on my site now? I am using joyn 2.0.

Looking forward to it!

[Swift Ideas – Ed]

Just add this custom css:

@media only screen and (max-width: 767px) {
.swift-slider-pagination {
        opacity: 1!important;
        display: block!important;
    }

}

– Ed

[ninesolutions]

Thank you so much Ed!!

A quick question here, is there any way to adjust the pagination position with an addition css line? Maybe slightly lower to the bottom edge of the slider?

I printed screen from my iphone and it is a bit near to the content elements in them.

View post on imgur.com

View post on imgur.com

Thank you!

[Swift Ideas – Ed]

Good shout. Change it to this:

@media only screen and (max-width: 767px) {
.swift-slider-pagination {
        opacity: 1!important;
        display: block!important;
        bottom: 10px!important;
    }
}

– Ed

[ninesolutions]

Thanks Ed! This is really wonderful! Made some changes to the px value and it is looking great now!

Just checking if there is anyway to select ‘circle’ pagination like these shown here? http://cardinal.swiftideas.com/asset-reference/page-builder-assets/swift-slider/

[ninesolutions]

hello,

Just checking again is there anyway in the setting which i can get pagination styles of the Swift Slider to be this round circles as shown here? http://cardinal.swiftideas.com/asset-reference/page-builder-assets/swift-slider/

In the Joyn theme the pagination are horizontal bars. Thanks!

[Swift Ideas – Ed]

Hi there,

Unfortunately that would require quite a bit of css to adjust. You can try editing this css in the style.css file –

.swift-slider[data-type="slider"] .swift-slider-pagination .dot {
	width: 50px;
}
.swift-slider[data-type="slider"] .swift-slider-pagination .dot span, .swift-slider[data-type="slider"] .swift-slider-pagination .dot:after {
	width: 50px;
	height: 4px!important;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.swift-slider[data-type="slider"] .swift-slider-pagination .dot.active span {
	-webkit-transform: translateY(400%);
	transform: translateY(400%);
}
.swift-slider[data-type="curtain"] .swift-slider-pagination .dot {
	height: 50px;
	margin: 8px 5px 0;
}
.swift-slider[data-type="curtain"] .swift-slider-pagination .dot span, .swift-slider[data-type="curtain"] .swift-slider-pagination .dot:after {
	height: 50px!important;
	width: 4px!important;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.swift-slider[data-type="curtain"] .swift-slider-pagination .dot:after {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}
.swift-slider[data-type="curtain"] .swift-slider-pagination .dot.active span {
	-webkit-transform: translateY(400%);
	transform: translateY(400%);
}

– Ed

[ninesolutions]

Hi Ed,

Thanks so much for the reply. I understand that it might be tough to change that.

I replace these 7 lines of code in style CSS but it didnt work though, nothing changed.

Am i missing something?

[Swift Ideas – Ed]

Hi there,

If you remove those lines, it should revert to the default circles.

– Ed

[ninesolutions]

Thanks Ed, it works and is looking great now!

Appreciate your great help here!

Your guys definitely have the best 5 star support ever.

[Kyle – SUPPORT]

Thanks Ed

[Swift Ideas – Ed]

No problem, glad you’re happy. We always appreciate a rating on the item, within your Downloads tab on ThemeForest.

Thanks!

– Ed