rhodadesignstudio
commented
9 years ago Never mind :) You can delete this if you want to. I had shrunk the viewport so it was wrapping the images that were hidden below the others. I enlarged that and then gave them enough padding that only 3 were showing at a time and now it works!
Now to figure out my media queries!! :)
Hello :) First I want to say thank you for the wealth of information on your blog. I was "Googling" and found your post on WordPress thumbnails that was a huge help! Very easy and precise!
I am working on turning a Soliloquy slider into a carousel (I didn't pay for the developer version that has the fun app add-on) but I did buy the Pro version for a single use, and was hoping I could just work some code magic on it instead.
What I have in the front-page file for it: <?php if ( function_exists( 'soliloquy' ) ) { soliloquy( 'home-products', 'slug' ); } ?>
And then my custom CSS: /-------------------------------------------------------------- Image Slider --------------------------------------------------------------/
soliloquy-56 {
}
soliloquy-container-56 {
}
.soliloquy-viewport{ min-height: 115px; min-width: 655px; max-height: 125px; max-width: 100%; }
.soliloquy-item { min-width: 125px; min-height: 125px; max-width: 125px; max-height: 125px; }
li.soliloquy-item.soliloquy-image-slide { max-width: 125px; max-height: 125px; margin: 0px 15px; }
img.soliloquy-image { border-radius: 20px; }
a.soliloquy-prev, a.soliloquy-next { min-height: 70px; min-width: 60px; border-radius: 11px; }
.soliloquy-prev { background: rgba(230,16,82,0.7) url(images/left.png) no-repeat scroll 50% 50% !important; margin-top: -34px !important; box-shadow: 2px 2px 8px #888888;
}
.soliloquy-next { background: rgba(230,16,82,0.7) url(images/right.png) no-repeat scroll 50% 50% !important; margin-top: -34px !important; box-shadow: 2px 2px 8px #888888; }
The settings that I made within the plug-in itself is just to run the images horizontally and the basic no frills settings.
My problem is that I can get three images to show in the slider but when I click the "next image" button the remaining images don't flow through the slider. You can see their position UNDER the slider when you hover over that area with the Chrome Dev tools open. I worked on this for hours! If there is something that you can see that I messed up on that would fix it, or something else that I could add to it? I would be very grateful :)
Rhoda