Topic: modify Homepage slider « SeaTheme

This topic has 6 replies, 2 voices, and was last updated 7 years, 1 month ago by SeaTheme.

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

Author

Posts
April 11, 2019 at 3:44 am #18248

timcederwall
Participant

Purchased
Expired

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://seatheme.net/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

WordPress Customization Service from $49 Only! Save your expensive time!

April 11, 2019 at 3:46 am #18249

timcederwall
Participant

Purchased
Expired

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

Thanks

WordPress Customization Service from $49 Only! Save your expensive time!

April 12, 2019 at 1:22 am #18260
SeaTheme
Keymaster

Purchased
Expired
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.com – Twitter – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

April 12, 2019 at 7:55 am #18270

timcederwall
Participant

Purchased
Expired

Beautiful that’s worked perfectly…

Lastly

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

Can I upload a custom icon?

WordPress Customization Service from $49 Only! Save your expensive time!

April 12, 2019 at 2:09 pm #18271
SeaTheme
Keymaster

Purchased
Expired
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);
}
```
WordPress Customization Service from $49 Only! Save your expensive time!

April 16, 2019 at 5:31 am #18291

timcederwall
Participant

Purchased
Expired

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

WordPress Customization Service from $49 Only! Save your expensive time!

April 16, 2019 at 5:54 am #18292
SeaTheme
Keymaster

Purchased
Expired
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
WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

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

You must be logged in to reply to this topic.