Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 4, 2014 at 3:21 pm #330207
    tomcarmans

    Hi

    In the ‘Content slider’ the arrow control buttons are different than on on ‘easy slider’: it are 2 small buttons above the content.
    Is it possible to have the same control buttons on the ‘Content slider’?

    Thanks

    Tom

    October 6, 2014 at 1:48 am #330641
    Ismael

    Hey Tom!

    Thank you for using Enfold.

    You can modify the content slider button with this:

    #top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 100%;
}

a.prev-slide {
left: 0;
}

    Regards,
    Ismael

    October 6, 2014 at 12:01 pm #330806
    tomcarmans

    Hi Ismael

    Thanx, but how do I position the slider button on top of the content? Now it is positioned before the content.
    Greetings

    Tom

    October 7, 2014 at 3:40 am #331317
    Ismael

    Hi!

    Add this code:

    #top .avia-smallarrow-slider-heading {
top: 50%;
position: absolute;
}

    Regards,
    Ismael

    October 8, 2014 at 11:31 am #332274
    tomcarmans

    Hi Ismael

    Thanx, almost there … :-)
    And how do I make the mouse-over area (to click) a height of 100%?

    Regards

    Tom

    October 8, 2014 at 12:03 pm #332288
    Yigit

    Hi!

    Please add following code to Quick CSS as well 

    #top .avia-smallarrow-slider-heading { top: 0; }
#top .avia-smallarrow-slider .avia-slideshow-arrows { height: 600px; }

    Regards,
    Yigit

    October 8, 2014 at 12:15 pm #332303
    tomcarmans

    Hi Yigit

    Thanks a lot, but in responsive mode (smaller screens) that doesn’t go well: it stays on 600px, so the arrows are not in the middle anymore :-)

    Regards

    Tom

    October 8, 2014 at 12:17 pm #332305
    Yigit

    Hey!

    Please change the code to following one

    @media only screen and (min-width: 990px) {
#top .avia-smallarrow-slider-heading { top: 0; }
#top .avia-smallarrow-slider .avia-slideshow-arrows { height: 600px; }}

    So it will be applied only on screens bigger than 990px

    Regards,
    Yigit

    October 8, 2014 at 12:36 pm #332322
    tomcarmans

    Hi Yigit

    The arrows are supposed to be always alligned in the center of the image. Now it is not always in the middle, depending on the width of the screen and the resized image.

    Regards

    Tom

    October 11, 2014 at 3:20 pm #334320
    Arvish

    Hey!

    I would suggest amending the height for different screen sizes using media queries:

    For example, add the following to custom.css. It covers most screen sizes but you might have to add one or two more depending on the effect that you want to achieve. Feel free to change the value of “top” to reposition the arrows.

    /*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  
         #top .avia-smallarrow-slider .avia-slideshow-arrows { position:absolute; top: -80px !important; }

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
         #top .avia-smallarrow-slider .avia-slideshow-arrows { position:absolute; top: -80px !important; }

}

    Regards,
    Arvish

    October 13, 2014 at 1:54 pm #334886
    tomcarmans

    Thankx, that worked!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Content slider arrow control buttons’ is closed to new replies.