Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.

  • 14/04/2017 Happy Easter

    Wish a Happy Easter and give 30% discount for all our WordPress and Joomla! extensions. Use EASTER17 coupon code. The offer is valid till 17 April.


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




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Extend Ari Image Slider navigation area
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: Extend Ari Image Slider navigation area
#58090
Extend Ari Image Slider navigation area 1 Year, 3 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.
The administrator has disabled public write access.
 
#58094
Re:Extend Ari Image Slider navigation area 1 Year, 3 Months ago Karma: 667
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
Last Edit: 2016/07/15 08:21 By admin.
The administrator has disabled public write access.
 
#58095
Re:Extend Ari Image Slider navigation area 1 Year, 3 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.
The administrator has disabled public write access.
 
#58096
Re:Extend Ari Image Slider navigation area 1 Year, 3 Months ago Karma: 667
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
The administrator has disabled public write access.
 
Go to topPage: 1