Home Forums Art WordPress Theme modify Homepage slider

This topic contains 6 replies, has 2 voices, and was last updated by  SeaTheme 7 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #18248

    timcederwall
    Participant
    Purchased

    Hi, I have almost finished my basic site structure and the theme is nice and clean so thank you in advance.

    My only issue remaining is with my “homepage” I want a simple slider that shows one centred image in its original dimensions. I do not want full screen.

    my question is similar to this question: https://www.uiueux.com/forums/topic/how-to-display-one-image-at-the-time-with-the-owl-slider/

    1. I want to know how can I modify to achieve a simple slider.

    – A modified slider on homepage
    – 1 image at a time
    – Centred
    – Not full width

    Slider Example: https://www.nevernow.com.au/

    Here is my URL: http://www.ethiko.com.au

    Thanks

    Tim

    #18249

    timcederwall
    Participant
    Purchased

    Also, I want no cropping of images. I want the images to display as they are. In different sizes and different orientations.

    Thanks

    • This reply was modified 7 months, 2 weeks ago by  timcederwall.
    #18260

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi

    Please paste the custom CS code to “Appearance > Customize: Additional CSS”

    .bm-slider-next:hover ~ .owl-carousel,
    .bm-slider-prev:hover ~ .owl-carousel .owl-stage-outer {
        margin-left: 0px;
    }
    .top-slider .ux-background-img {
    background-size: contain;
    }
    .top-slider .carousel-des-wrap-inn {
    bottom: 10px;
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #18270

    timcederwall
    Participant
    Purchased

    Beautiful that’s worked perfectly…

    Lastly

    Where do I change the icon for navigation in the slider?

    Can I upload a custom icon?

    #18271

    SeaTheme
    Keymaster
    Purchased
    Supported

    Welcome

    You could upload the 2 arrow png files, get the URLs, paste the URLs into the custom CSS url(xxx.png)

    .bm-slider-next,
    .bm-slider-prev {
       background-repeat: no-repeat;
        background-size: 60px;
        background-position: 50% 50%;
        background-image:url(the-left-arrow-URL.png);
    }
    .bm-slider-next {
        background-image:url(the-right-arrow-URL.png);
    }
    #18291

    timcederwall
    Participant
    Purchased

    Hi thanks for your response, but as you can see the result was not totally correct. I wanted moving cursor based arrows not fixed buttons
    my site: http://www.ethiko.com.au

    I was wanting moving cursor type arrows like this other example;
    https://www.laraminerva.com/index.php/ux-portfolio/romantic-sensuality/

    Also, can I turn this code (arrows) off on my mobile site? it causes issues.

    Thanks

    #18292

    SeaTheme
    Keymaster
    Purchased
    Supported

    Plz remove the background image CSS in prev post
    Use the cursor CSS:

    .bm-slider-next, .bm-slider-prev { 
    width: 50%;
    cursor: url(the-right-arrow-URL.png),auto;
    }
    .bm-slider-prev {
    cursor: url(the-left-arrow-URL.png),auto;
    }
    .touchevents .bm-slider-prev, .touchevents .bm-slider-next {
    display:none;
    }
    

    Ps: the image for cursor should be less than 128×128px
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!