ARI Soft - Extend Ari Image Slider navigation area

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show Cart

Recent Events

23/11/2024 Black Friday 2024

BIG SALE, 30% discount for all our extensions. Use BF24 coupon code. Hurry up the discount is valid till 3 December.

more...
31/12/2023 New Year SALE

We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

Joomla components

ARI Image Slider

Extend Ari Image Slider navigation area

(1 viewing) (1) Guest

Page: 1

TOPIC: Extend Ari Image Slider navigation area

Forum Tools

#58090

Extend Ari Image Slider navigation area 8 Years, 5 Months ago

Karma: 0

I am trying to use the Ari Image Slider on a mobile site, and find the navigation arrows a little small. Ideally I would like to extend the next/previous navigation areas to be either the right half (next) or left half (previous) of the slider image. Can this be done? If not, can I at least increase the size of the navigation hotspot to a larger area?

Modifying the CSS would be fine if that's what it would take....

Thanks.

CDATech

The administrator has disabled public write access.

#58094

Re:Extend Ari Image Slider navigation area 8 Years, 5 Months ago Karma: 760

Hello,

If want to use left part of slider as navigation to previous slide and right part as navigation to next slider on a small screen size, add the following CSS rules to a site template CSS file or to "Advanced -> CSS Styles" parameter in module settings:

Code:



@media screen and (max-width: 480px) {



.ari-image-slider a.nivo-nextNav,

.ari-image-slider a.nivo-prevNav {

    background-image: none;

    height: 100%;

    top: 0;

    width: 50%;

}



.ari-image-slider a.nivo-nextNav {

   right: 0;

}



.ari-image-slider a.nivo-prevNav {

   left: 0;

}



.ari-image-slider a.nivo-prevNav::after,

.ari-image-slider a.nivo-nextNav::after {

    color: #FFF;

    display: block;

    width:100%;

    text-indent: initial;

    position: relative;

    top: 50%;

    font-size: 4em;

    margin-top: -1em;

}



.ari-image-slider a.nivo-nextNav::after {

    content: ">";

    text-align: right;

}



.ari-image-slider a.nivo-prevNav::after {

    content: "<";

    text-align: left;

}



}

Regards,
ARI Soft

admin

Last Edit: 2016/07/15 14:21 By admin.

The administrator has disabled public write access.

#58095

Re:Extend Ari Image Slider navigation area 8 Years, 5 Months ago	Karma: 0
Thanks very much. I'd actually like to modify this slightly; I want to use it for all screen sizes (so will delete the "and (max-width: 480px)", and I would also like to keep the default arrow images rather than add the less than and greater than brackets. Can I easily change the CSS to keep the images? Thanks again.

CDATech

The administrator has disabled public write access.

#58096

Re:Extend Ari Image Slider navigation area 8 Years, 5 Months ago	Karma: 760
This is just a sample code. You can modify it for your purpose. For example use one of navigation symbol from unicode characters table. Some of them you can see here. Size of characters can be easily changed via CSS without losing quality. Regards, ARI Soft

admin

The administrator has disabled public write access.

Page: 1

Useful Links