Bx slider - displaying partially hidden slides at the far right while utilizing a full-width carousel

Implementing a slider on my nodejs website using bx slider has been quite an experience. Below is how I achieved it:

$(document).ready(function(){
    $(".bxslider").bxSlider({
        minSlides: 1,
        maxSlides: 40,
        slideWidth: 300,
        slideMargin: 40,
        moveSlides: 1
    });
});//document ready

To ensure the slider adjusts fluidly to 100% width, I set the maxSlides value to 40. This allowed the slider to expand smoothly across the full width of the page. However, an issue arose when the rightmost visible slide was only partially displayed at certain widths. My goal now is to have the slider either show the complete slide or omit it if it's not entirely visible within the current viewport.

jquerycssbxslider

Answer №1

UPDATE

OP is looking for a simpler example using the shrinkItems feature.

PLUNKER

Check out shrinkItems: The Carousel functionality ensures that only complete items are displayed, and images are resized to fit the viewport based on maxSlides/minSlides settings. It guarantees there are no partial views of the slides.

PLUNKER

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>100% Fluid Width bxSlider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    li {
      min-height: 160px;
      border: 3px solid black;
      margin: 0 auto;
    }
    
    .s10 {
      min-height: 160px;
      border: 5px solid red;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <ul class="bx1">
    <li class='s10'>SET 0</li>
    <li><img src="http://placehold.it/350x195/000/fff?text=1"></li>
    <li><img src="http://placehold.it/440x170/000/fff?text=2"></li>
    <li><img src="http://placehold.it/200x310/000/fff?text=3"></li>
    <li><img src="http://placehold.it/500x180/000/fff?text=4"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=5"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=6"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=7"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=8"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=9"></li>
    <li class='s10'>SET 1</li>
    <li><img src="http://placehold.it/310x195/000/fff?text=11"></li>
    <li><img src="http://placehold.it/540x170/000/fff?text=12"></li>
    <li><img src="http://placehold.it/260x210/000/fff?text=13"></li>
    <li><img src="http://placehold.it/700x180/000/fff?text=14"></li>
    <li><img src="http://placehold.it/340x160/000/fff?text=15"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=16"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=17"></li>
    <li><img src="http://placehold.it/350x190/000/fff?text=18"></li>
    <li><img src="http://placehold.it/360x150/000/fff?text=19"></li>
    <li class='s10'>SET 2</li>
    <li><img src="http://placehold.it/350x195/000/fff?text=21"></li>
    <li><img src="http://placehold.it/440x170/000/fff?text=22"></li>
    <li><img src="http://placehold.it/200x310/000/fff?text=23"></li>
    <li><img src="http://placehold.it/500x180/000/fff?text=24"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=25"></li>
    <li><img src="http://placehold.it/300x250/000/fff?text=26"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=27"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=28"></li>
    <li><img src="http://placehold.it/350x150/000/fff?text=29"></li>
    <li class='s10'>SET 3</li>
    <li><img src="http://placehold.it/630x195/000/fff?text=31"></li>
    <li><img src="http://placehold.it/450x620/000/fff?text=32"></li>
    <li><img src="http://placehold.it/300x390/000/fff?text=33"></li>
    <li><img src="http://placehold.it/400x180/000/fff?text=34"></li>
    <li><img src="http://placehold.it/150x160/000/fff?text=35"></li>
    <li><img src="http://placehold.it/390x250/000/fff?text=36"></li>
    <li><img src="http://placehold.it/520x190/000/fff?text=37"></li>
    <li><img src="http://placehold.it/340x130/000/fff?text=38"></li>
    <li><img src="http://placehold.it/550x155/000/fff?text=39"></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  <script>
    $(document).ready(function() {
      var bx1 = $(".bx1").bxSlider({
        minSlides: 1,
        maxSlides: 40,
        slideWidth: 300,
        slideMargin: 5,
        moveSlides: 1,
        shrinkItems: true
      });
    });
  </script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image appears as the original image instead of the rotated image after the rotation has been

Is there a way to display a rotated image after clicking on left and right buttons? Currently, the original image is shown, but it displays the rotated image after clearing history and cache. var degrees = 0; $("#cboxRight").on('click', functio ...

jqueryimagerotation

Tips for shifting icons from the left to the right when collapsing a sidebar menu

Trying to solve a challenge with the sidebar width transition! How can I move icons to the right only when the sidebar is at a width of 50px, within the specified area? The current look: https://i.sstatic.net/GIc4n.png Desired outcome: https://i.sstati ...

jquerycsstwitter-bootstrapbootstrap-4

Tips for customizing the color of the current date in the angular-material datepicker

I've created a function in angular-material to disable dates two days from now, but I'm struggling to change the color of the current date if it's disabled. The issue is that when the current date is disabled, it displays in a very light blu ...

javascriptcssangularjsdatepickerangular-material

The width of the HTML select dropdown needs to be adjusted as it appears too large

I've been trying to find a solution to my issue, but I'm having trouble locating one. It could be because English is not my first language and maybe I'm not searching using the right terms. The problem I'm facing is with implementing t ...

jqueryhtmlcssselectwidth

Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong. * { box-sizing: border-box; margin: 0; padding: 0; } .container { ...

htmlcsslayoutfrontendgrid

The appearance of the pop-up mask is displayed at lightning speed

Check out the demo here Here is the HTML code: <div class="x"> </div> <input class="clickMe" type="button" value="ClickMe"></input> This is the JS code: $(".clickMe").click( function() { ...

javascriptjqueryhtmlcss

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

javascriptjqueryhtmlarrays

The challenge of navigating CSS specificity guidelines

In my CSS file, I have defined two styles for a table with the class "myTable". The first style sets the background color of header cells to gray, while the second style sets the background color of odd rows to blue: .myTable th { background-color: gr ...

css

jquery causing issues with content loading

Greetings everyone, I have been attempting to load content into a div using this tutorial with the help of jQuery. However, I am encountering an issue where when I click on the link <a href="about.html" class="panel">Profile</a> , it loads ...

jqueryajaxhtml

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Currently, I am developing a python/django website using bootstrap, and I have encountered an issue that I cannot resolve independently. It has been quite some time since I last worked with python/django/bootstrap, so I may be overlooking something? <fo ...

htmlcssdjangobootstrap-5

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both ...

htmldomcss

Adding the "disabled" attribute to a button using React

I am currently working on a project using Reactjs/nextjs and I need to add or remove the "disable" attribute. Can anyone assist me with this? Below is the code snippet I am working with: const handleSubmit = (e) => { e.preventDefault(); ...

javascriptjqueryreactjsnext.js

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson

Prevent the colorpicker feature for the <input type="color"> element on Google Chrome

When using Google Chrome, the <input type="color"> element creates an input field with a color bar inside it. By default, it opens a colorpicker that may vary in appearance depending on the operating system (mine has a Windows theme). I have implemen ...

jquerycsshtmlgoogle-chrome

"Troubleshooting: Issues with Ajax's .load() function disrupting

I'm encountering a strange issue where the load() function is causing my carousel to malfunction. Within my Slick Slider, I have 3 slides. You can navigate to the next slide by clicking the NEXT button. Alternatively, clicking on the slide itself loa ...

javascriptjqueryajaxiframeslick.js

Enhancing D3 visualization with centralized alignment and mobile-friendly responsiveness

I am still quite new to JavaScript and development in general, so I may be overlooking something obvious. Although I have successfully created a chart using d3, I am struggling with positioning. No matter how much I manipulate it with CSS, the chart just d ...

javascriptcssd3.js

Encasing common functions within (function($){ }(jQuery) can help to modularize and prevent

As I was creating a global JavaScript function and made some errors along the way, I finally got it to work after doing some research. However, while searching, I came across an example using (function($){ code here }(jQuery); My question is, what exact ...

javascriptjqueryajax

AJAX call error: Invocation not permitted

I'm currently working on a web application using JQuery that requires communication with a server. I've reused this code multiple times, only changing the data and success function. However, every time I execute this function, I encounter an err ...

javascriptjqueryajax

Achieving centered body content on a webpage through CSS

I have completed the design of a webpage and utilized CSS for positioning elements. The current layout consists of a Header, Horizontal Menu, and a Content Section with 2 columns, all of which are set to the same width. Although I have successfully aligne ...

css