Topic Resolution: Resolved
  • Closed
  • Harald Röh
    Spectator
    February 11, 2016 at 11:26 am #24233

    Hi,
    in release 2.5.1 the left/right arrows in the bootstrap slider are located near each other in the lower left corner of the slides.
    (see test.gfcev.de )

    I would very much prefer to have them symmetrically positioned on the very left and far right side of the slider, and vertically centered.
    (see gfcev.de for a comparison)

    CSS assistance very much welcomed!

    Thanks and best regards,
    Harald

    Imran
    Spectator
    Posts: 402
    February 11, 2016 at 2:26 pm #24247

    Hi Harald,

    Thanks for writing in! please add the following code under your custom CSS field:

    #bootstrap-slider .carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
    }

    #bootstrap-slider .carousel-control.left {
    left: 0;
    right: auto;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
    }

    #bootstrap-slider .carousel-control {
    position: absolute;
    top: 0;
    bottom: 0 !important;
    left: 0;
    width: 15%;
    }

    #bootstrap-slider a.left:before, #bootstrap-slider a.right:before {
    position: absolute;
    top: 50%;
    }

    #bootstrap-slider a.right:before {
    right: 15%;
    }

    #bootstrap-slider a.left:before {
    left: 15%;
    }

    Hope this helps.

    Thank you!

    Harald Röh
    Spectator
    Posts: 39
    February 12, 2016 at 10:42 am #24292

    Hi Imran,

    thanks for the quick response!
    This code is exactly what I was looking for.
    It is doing the job as desired.

    Best regards,
    Harald

    Imran
    Spectator
    Posts: 402
    February 12, 2016 at 10:53 am #24293

    You’re welcome Harald! 🙂