JS Code for Optimal Viewing on Mobile Devices

I'm struggling with creating 3 image columns in 2 columns on mobile. It seems like there is a JS issue related to the minslide:3 and maxslide:3 conditions...

When viewed on mobile, it's displaying 3 slides instead of 2. How can I adjust it to show only 2 slides in 2 columns?

$j('#slider-collection-product .slides').bxSlider({
  auto: false,
  pager: false,
  responsive: true,
  slideWidth: 500,
  slideMargin: 50,
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 3
});
<div class="category-body sub_category_16">
  <div class="slider slider-category">
    <div class="slider-clip">
      <div class="bx-wrapper" style="max-width: 1248px;">
        <div class="slider" id="slider-collection-product">
          <div class="slider-clip" style="width:100%;">
            <ul class="slides">
              <li class="slide">
                <div class="slide-image">
                  <a href="#">
                    <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
                  </a>
                </div>
                <div class="slide-content">
                  <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
                  <p class="slide-price">€1,650 - €1,700</p>
                  <div class="promo_text"></div>
                </div>
              </li>
              <li class="slide">
                <div class="slide-image">
                  <a href="#">
                    <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
                  </a>
                </div>
                <div class="slide-content">
                  <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
                  <p class="slide-price">€1,650 - €1,700</p>
                  <div class="promo_text"></div>
                </div>
              </li>
              .
              .
              .
              <li class="slide">
                <div class="slide-image">
                  <a href="#">
                    <img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
                  </a>
                </div>
                <div class="slide-content">
                  <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4>
                  <p class="slide-price">€1,650 - €1,700</p>
                  <div class="promo_text"></div>
                </div>
              </li>
            </ul>
            <!-- /.slides -->
          </div>
          <!-- /.slider-clip -->
        </div>
        <!-- /.slider -->
      </div>
    </div>
  </div>
</div>
<!-- /.category-body -->
javascriptjqueryhtmlcssjquery-mobile

Answer №1

One clever workaround is to incorporate media-query dependent javascript. This way, you can adjust and activate different settings for a bxslider based on the width:

if (document.documentElement.clientWidth < 900) {
    // custom scripts for screens less than 900px
}

Alternatively, you can use window.matchMedia to check the browser width and apply specific settings accordingly:

var mq = window.matchMedia('@media all and (max-width: 700px)');
if(mq.matches) {
    // code if browser width is more than 700px
} else {
    // code if browser width is less than 700px
}

Find out more about Media Queries & javascript at Sitepoint

Learn about Media Queries & javascript from Modernweb

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

What could be causing the createReadStream function to send a corrupted file?

My current task involves generating a file from a URL using the fs module to my local system. Initially, everything seems successful. However, when attempting to post this file into a group using the createReadStream() function, I encounter an issue where ...

javascriptnode.jsexpressfs

How to integrate Phpfox::getBlock into a template file within PHPFOX

Today, I attempted to integrate Phpfox::getBlock into the template file within PHPfox but encountered some issues. Can someone take a look and identify where the problem lies? I am looking to include a PHP block: core.template-copyright into the followi ...

phphtmlphpfox

Utilizing variable values in Google Charts with AngularJS

Hello everyone, I am attempting to display a chart using data obtained from an API. The output of the API is in the form of List<String> and not in JSON format. Here is the snippet of my JS file: google.load('visualization', '1', ...

javascriptangularjsgoogle-visualization

Using Ajax to trigger JSON-formatted HTML output

Issue with Populating Modal Window I am encountering difficulties while trying to populate a modal window dynamically with extended information retrieved from a mySQL database. Despite attempting various methods such as nested arrays, while loops, and for ...

phpjqueryhtmlmysqljson

Center text inside a d3 svg element

As a newcomer to the d3 library, I am facing challenges with a basic task. Inspired by this example on gradients, I have integrated a linear gradient into the footer div element: #footer { position: absolute; z-index: 10; bottom: 10 ...

htmlcssd3.jssvg

How can you ensure a code snippet in JavaScript runs only a single time?

I have a scenario where I need to dynamically save my .env content from the AWS secrets manager, but I only want to do this once when the server starts. What would be the best approach for this situation? My project is utilizing TypeScript: getSecrets(&qu ...

javascriptnode.jstypescriptmongodbexpress

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

htmlcssinput

Specify a preset selection time in a TextField of time type in Material UI

I am looking to establish a default time for a textfield of type time in Material UI. My requirement is that before the user clicks on the picker, no time should be pre-set, but once they click, 08:00 should appear as the default time to choose from. View ...

javascriptreactjsmaterial-uitextfieldpicker

Initiate an "execute.document" command directly from the address bar

While reviewing my old website, I stumbled upon this snippet: <input type="image" id="QuickPass" name="QuickPass" src="/images/QuickPass.gif" alt="Quick Pass" onclick="document.pressed=this.value" value="QuickPass" /> nestled within this form: & ...

javascripthtmlurl

The content division does not have a set position

The content div is not adapting to different screen sizes properly. As the width and height of the browser shrink, it's overlapping with the header and footer. I'm using flex but I'm unsure if I'm implementing it correctly. display: ...

htmlcssresponsive

Tips for sending an object to an action method in ASP.NET Core MVC

One way to pass an object for editing from a view to an Upsert action method is by using Tag-Helpers. Here's an example: In my Index.cshtml file (check out the Edit link below): @foreach (var item in Model) { <tr> ...

jqueryajaxasp.net-mvcasp.net-core

Creating a custom JavaScript clock based on stored database values

I am looking to create an analog clock using JavaScript. I have both working hours and off hours stored in a database. My goal is to display working hours in one color and off hours in another color on the clock. How can I achieve this? The database prov ...

javascriptjqueryhtml

Despite locating the button, Protractor still encounters difficulties when attempting to click on it

I've been having trouble clicking on a button using Protractor. The issue is that even though the driver can locate the element, it still won't click on it. Any assistance would be greatly appreciated. Thank you in advance. Here is the HTML for ...

javascripthtmlxpathselenium-webdriverprotractor

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

javascripttypescript

Comparing the efficiency of using arrays versus mapping to an object and accessing data in JavaScript

When considering the basics of computer science, it is understood that searching an unsorted list typically occurs in O(n) time, while direct access to an element in an array happens in O(1) time for HashMaps. So, which approach yields better performance: ...

javascriptarraysjsonperformancedictionary

What is the best way to ensure that this jQuery window has a minimum size?

Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...

javascriptjqueryhtmlcssjquery-ui

Navigating between sibling components in Angular 1.5 using the component router

Is there a way to use the new component router in Angular 1.5 to display the sibling component alongside the main one within the ng-outlet directive? I am looking to showcase both the Detail View and the List View at the same time. Based on my understandin ...

javascriptangularjsangular-component-router

Persist user input even after reloading the page

In order to enhance the user experience, I would like to implement a feature where the data entered by the user is preserved even if they refresh, reload, or close the page. This includes retaining the selections made in the select elements. Additionally, ...

javascripthtmljquerycss

Invoke a method in an Angular 2 component using an HTML event

Can an angular component method be invoked using an HTML event? <shape onclick="myMethodInParentComponent()" > I am unable to use (click) as shape is not recognized by Angular. Shape also contains several unknown sub elements making it impractical ...

javascriptangular