21
Replies
What size display do you have? What is your screen resolution?
On my device it looks fine, no scrolling needed.
All slideshows work best with images that are same size & aspect ratio.
For images of mixed size and aspect ratio, consider switching to a gallery & picture viewer like Fancybox3. See example below.
https://alt-web.com/GALLERY/Masonry-Gallery.php
1. The portrait / standing images are too big on the page. They don't fit in one window like the squared ones are. I don't like it that you've got to scroll to see an image. It needs to be visible at one page without scrolling (does that make sense?)
Well you have a problem there because the images you are refering to are tall and will only fit into the browsers window depth IF the user has their browser window set beyond the depth of the images themselves, otherwise the user WILL need to scroll vertically to see some of the image.
You can attempt to negate the problem by setting the width of ALL the images to a smaller width, this obviously means the depth of the images will be smaller and so have more chance of fitting into the browser window depth without having to scroll.
You can do this by changing the number of columns the carousel width takes up (see the line of code below, in red. You can experiment with the number of columns occupied by the carousel on different devices)
<div class="row mt-5">
<div class="col-9 col-sm-7 col-md-4 mx-auto">
2. Can I enlarge the invisible boxes of the 'previous' and 'next' button till they are both covering half of the page? So when you click on the right side, you go next, and when you click on the left side, you go back.
Is that possible? And if so, how?
I would highly recommend you re-instate the carousel arrow icons as per Bens code NOT your code. Your attempt to position the 'previous/next' text to be clear of the images has resulted in the text not being centered vertcially.
To position the arrows outside of the images you need to overide the default classes. Include the below css in your custom css styles. This MUST come AFTER the link to the Bootstrap default css file
.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
}
.carousel-control-next {
right: -75px;
}
.carousel-control-prev {
left: -75px;
}
Using the arrows rather than the text will give you more space on smartphones for the image, also arrow icons will provide clear guidance to the user that they can go backwards and forwards instead of assuming they will click about all over the place to find out how to move through the carousel, which is highly annoying.
I'm ok with arrows, as long as they are very small; like the font size at the top. Can you send me the code from what to place after the carousel with images so I don't remove things that shouldn't be removed? That would be a great help.
================
Revert to the original code that Ben posted on June 6th.
Size matters greatly. Small targets are an accessibility problem for people on touch screen devices. An adult human finger tip radius is approx 45px. The default Cycle2 arrows are an appropriate size for average users on various devices. Changing size could adversely effect usability. So my advice is leave the size alone.
Good luck with your project! 🙂
AdChoices