1) How do I adjust the images in the Carousel? My pics have a normal height of 300 px and they are appearing too large on my website, making the text underneath disappear below the monitor viewing area (have to scroll down to read it). I have tried adding the code to max the height at 100 px and tried loading my re-saved pics at 100 px. Doesn't matter. The Carousel shows the images almost at full screen height (monitor is 1920x1200, using Firefox).
2) I was hoping to setup an image and a carousel side-by-side to each other. Is that possible? Or must the carousel be on my own "line", with text and other images below it?
Thanks!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I'm still having the issue #1. How do I adjust the images in the Carousel, to prevent them from resizing when the browser window is resized? Thanks.
I put it in a <div> to control the size.
[slideshow]
[slideshow-content] [[File:919333 | class=media-item-align-none | WOODEN-GNOME-_scaled.jpg]] [end-slideshow-content]
[slideshow-content] [[File:919334 | class=media-item-align-none | wooden-doll-right.jpg]] [end-slideshow-content]
[slideshow-content] [[File:919332 | class=media-item-align-none | wooden_dwarf_-scaled.jpg]] [end-slideshow-content]
[slideshow-content] [[File:919335 | class=media-item-align-none | wooden-doll.jpg]] [end-slideshow-content]
[slideshow-options] false | 1 | 1 | 2000 | true | true | 500 | true [end-slideshow-options]
[end-slideshow]
</div>
That is exactly what I was looking for. It looks much better now.
Speaking of carousels... does anyone have a code snippet that removes the top boarder on the next/previous buttons, as well as the dot indicators? You don't notice them on a plain background, but they are pretty glaring on a non-white background.
-bort
Campaign of the Year - 2018
The dot indicators can be removed by unselecting the "Dots" checkbox or using FALSE in the first option field of the CSS.
Not sure about how to remove the top boarder, but I want to add to be able to remove the next/previous arrows. When I created this carousel to be next (i.e. side-by-side) to another image, the arrows were shown over the other image.
I'm sorry, I mispoke. I want the dot indicators. I don't want the top border on each dot, and the top border on the prev/next arrows.
As for making them not disappear, I'd imagine its somewhere along the below, but I couldn't quite get them to work. Perhaps a wiser CSS guru can see whats missing.
-bort
Campaign of the Year - 2018
Bortas,
Here you go. This took a lot longer to figure out than it should have.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Abersade- Thank you! Something quite simple, but I just couldn't seem to nail it down. Thanks for finding that!
-bort
Campaign of the Year - 2018
Will that code make the arrows dissapear?
I hate to recommend it but adding the !important tag to Bort's previous and next code above makes it work, and given that the site itself is adding the css to display it at the element level I don't see an easy alternative.
Ergo, to make the arrows vanish:
To make the dots vanish:
Hopefully it should be obvious that one shouldn't use both of those code snippets, as doing so renders your carousel into just a static picture unless there's a setting or something to make it shift pictures automatically.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Works great. thanks Abersade