While attempting to utilize the rslides JS plugin, I encountered a frustrating issue. I am importing images to the site via links, which prevents me from resizing them. Unfortunately, the slider does not handle this well; it expands. The slider is responsive and adjusts with the page width. One potential solution could be setting static size values, but I prefer avoiding this as it may disrupt the responsive scaling.
Edit: Forgot to include the site link
Some points of clarification based on comments:
The images are resized within the slider. However, the slider's height is resizing to match some image sizes due to differing aspect ratios. I want to resize the images' width and crop any overflow in height.
CSS
/*SLIDER*/
.slider{
background-color: #222;
}
.rslides_container {
...
};
HTML
<div class="block slider">
<div class="rslides_container slider_medium">
...
</div>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, speed: 1500, timeout: 5000, pause: true,
});
});
</script>
</div>
& A significant amount of JavaScript code (formatting might not display correctly).
(function ($, window, i) {
...
$.fn.responsiveSlides = function (options) {
...
});
})(jQuery, this, 0);