Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 19, 2018 at 7:06 pm #1035294
    bromso

    I have 3 questions because I’m trying to do so that the easy slider has a similar look to what Digital Ocean has on their website.

    1. 1. Can I make so that the ‘Slideshow Transition’ both ‘Slides sideways’ and ‘Fades’ at the same time, much how Digital Ocean does on their landingpage? Reference image and link is attached below.
    2. 2. What CSS do I need to apply to move the rings (‘goto-slide’ or ‘avia-slideshow-dots avia-slideshow-controls’) so they will be outside and below of the picture so to speak?
    3. 3. Basically the same question as above but for the image caption title and paragraph content?

    Reference image
    https://photos.app.goo.gl/cFU9QFkEJkpVXyHY7

    Refrence URL:
    https://www.digitalocean.com/

    • This topic was modified 6 years, 1 month ago by bromso.
    November 21, 2018 at 10:19 pm #1036331
    bromso

    ???

    November 22, 2018 at 12:06 pm #1036472
    Ismael

    Hi,

    Thank you for using Enfold. And sorry for the delay.

    1.) You can use this css code to add a fade effect to the slider.

    .avia-slideshow li img {
  opacity: 0;
  -webkit-transition: opacity 0.7s; /* Safari */
  transition: opacity 0.7s;
}

.avia-slideshow li.active-slide img {
  opacity: 1;
}

    2.) And this one to move the dots outside the slide container.

    .avia-slideshow {
    padding-bottom: 50px;
}

    Best regards,
    Ismael

    November 24, 2018 at 9:28 pm #1037289
    bromso

    No problem Ismael. I’m just grateful that you are helping me. :)

    Well, the fade effect should apply when a slide is sliding in and away, so speak. Basically, Fade up when the slide is sliding in. And Fade out when the slide is sliding out.

    The code you attached didn’t really work unfortunately.

    • This reply was modified 6 years ago by bromso.
    November 28, 2018 at 6:25 pm #1038655
    bromso

    Any thoughts? :)

    December 3, 2018 at 4:16 am #1040088
    Ismael

    Hi,

    Sorry for the late response. I was away from the forum for a while. Anyway, the slide from the digital ocean site does fade in when it’s active but it doesn’t fade out when it slide out. The transition is just too fast that it looks like it’s fading out. It is possible with the slider but it will require more than some css modifications. The first css code works on my end but you can also try this:

    .avia-slideshow li {
  opacity: 1 !important;
}

.avia-slideshow li:not(.active-slide) img {
  opacity: 0;
}

.avia-slideshow li.active-slide img {
  /* opacity: 0; */
  -webkit-animation: fadein 2s; 
  animation: fadein 2s;
}

@keyframes fadein {
  0%   {opacity: 0}
  50%  {opacity:  1}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.