Same navigation icons on product-page and sliders?

[alexanderchristiansen]

Hi awesome Swift,
I really like your navigation icons on product-page:
http://organicbasics.com/product/boxers/

See attached photo as well.

I would like to have these icons – same style on my sliders here:
http://organicbasics.com/test_abo-4/

How is this doable? 🙂

thanks in advance.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

It’s rather complex CSS that you would require.

This works for me:

.swift-slider-next i[class^="sf-icon-"], 
.swift-slider-prev i[class^="sf-icon-"] {
    display: none;
}
.swift-slider a.swift-slider-prev, 
.swift-slider a.swift-slider-next {
    opacity: 1;
    border-radius: 0;
    width: 42px;
    height: 40px;
    background: #fff!important;
    font-size: 66px;
    color: #222!important;
}
.swift-slider-next i,
.swift-slider-prev i {
    display: block!important;
    font-size: 16px;
    display: block!important;
    font-family: FontAwesome!important;
    line-height: 15px;
}
.sf-icon-slider-chevron-next:before {
    content: "\e619";
    margin-left:-15px;
}
.sf-icon-slider-chevron-prev:before {
    content: "\f053";
    margin-right:-15px;
}

[alexanderchristiansen]

Hi David,
Amazing – Almost made the trick 🙂
http://organicbasics.com/test_abo-4/
Now it’s only the right navigator that’s missing 🙂

Further is it doable to make them position like on the product-page? 🙂 (see attached screenshot)

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Sure, please amend to this:

.swift-slider-next i[class^="sf-icon-"], 
.swift-slider-prev i[class^="sf-icon-"] {
    display: none;
}
.swift-slider a.swift-slider-prev, 
.swift-slider a.swift-slider-next {
    position: absolute;
    top: auto;
    bottom: 30px;
    left: 30px;
    opacity: 1;
    border-radius: 0;
    width: 42px;
    height: 40px;
    background: #fff!important;
    font-size: 66px;
    color: #222!important;
}
.swift-slider a.swift-slider-next {
  left: 80px
}
.swift-slider-next i,
.swift-slider-prev i {
    display: block!important;
    font-size: 16px;
    display: block!important;
    font-family: FontAwesome!important;
    line-height: 15px;
}
.sf-icon-slider-chevron-next:before {
    content: "\f054";
    margin-left:-15px;
}
.sf-icon-slider-chevron-prev:before {
    content: "\f053";
    margin-right:-15px;
}

[alexanderchristiansen]

David – you are a hero.
Though last problem – nothing happends when I click them now?
http://organicbasics.com/test_abo-4/

[Mohammad – SUPPORT]

Hi,
Please use this custom css code also:-

.swift-slider-pagination.light{
    width: 100%;
    margin-top: 30px !important;
    height: 20px !important;
}

Thanks
Mohammad

[alexanderchristiansen]

Mohammed,
You make things come true!
Thanks a bunch!

I have a follow-up question though.
Howcome does the slider show a tiny pixel of my next photo in the slider?
See the black vertical line to the right of the image of my boxers on attached photo?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Its looking perfect to me. Just check after clear the cache of browser.
Thanks
Mohammad

[alexanderchristiansen]

Hi Mohammed,
still happends to me.
Try in Safari – or try to slide through the images in Chrome.
see attached photos showing minor white gap. If you resize the window it might even show a snippet of black from the next photo.
Page: http://organicbasics.com/personalsubscription/

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

I do not see that for Chrome or Safari, I’m on Mac. What OS are you using?

Thanks.