Stylish visuals in adaptable design

When in desktop mode, I want to display three images in center mode. However, in responsive mode, I need to display only a single image but it ends up displaying all three images:

https://i.sstatic.net/EejIK.png

Check it out

<div class="slider-section2" style="overflow:hidden">
   <div class="slid-container">
       <ul class="slickImage" ng-if="loadSwiper" ng-init="previewAd.loadSwiperImages()">
           <li ng-repeat="image in ads.adDetailForPreview.MainAdsImages track by $index">
               <div class="block-cont">
                    <img ng-class="IsRegularSizeAd?'':'DoubleSizeImg'" ng-src="~/Content/Images/AdsImages/{{image.Path}}" />
                </div>
            </li>
        </ul>
    </div>
</div>

Jquery Solutions

$(".slickImage").slick({
     centerMode: true,
     infinite: true,
     autoplay: false,
     centerPadding: '0px',
     slidesToShow: 1,
     arrows: true
});

If anyone has a solution to this issue, please share!

Answer №1

Have you experimented with breakpoints in your code? Here's an example:

responsive: [
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }
]

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

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

Tips for aligning the contents of multiple tables in HTML to the center

Currently, I am in the process of designing a website where there will be four titles displayed above four images, with corresponding descriptions below each. I have utilized two separate tables for the titles and descriptions. While the layout appears fin ...

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

Surprising outcome when attempting to load a partial view into an Internet Explorer 8 DOM using jQuery Ajax

Encountering a peculiar issue while loading a Partial View with jQuery Ajax in IE8. The result appears distorted when viewed using this browser. The hypothetical Partial View causing trouble looks like this: <aside>Example test</aside> After ...

HTML content does not reload when using AJAX

I have been experimenting with this code to show text and then fade it out: $('#submit_new_player_order').click(function(e){ //some data to define data_to_send $.post(ajaxurl, data_to_send, function() { alert('it is in here') ...

Authorization and entitlement capabilities in .Net similar to those found in AzMan

Seeking the most effective method for implementing application authorization and entitlement in a .Net environment. In the past, AzMan was commonly utilized for this purpose but with the introduction of the provider model, roles are now managed different ...

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

What is the best way to render JSON information in JSP with JavaScript?

Using Spring MVC, my controller "Book.java" returns a JSON object. I would like to display the content of the JSON object in a table format in a JSP. How can I achieve this? Here is the function in my controller that returns the JSON object: @Controller ...

Tips on concealing error messages and displaying only a single error message using jQuery validation

I am currently utilizing the jQuery Validate Plugin to validate my form inputs. My goal is to hide the error messages displayed next to the input fields and instead show a main error message at the bottom of the form. While I have managed to achieve this t ...

Displaying only one modal at a time with Bootstrap 3

The code snippet below is used to trigger my newsletter modal: $(window).load(function(){ if (sessionStorage.getItem("is_seen") === null) { setTimeout(function(){ $('#newsletter_modal').modal('show&ap ...

Ensure the child element is completely visible when it exceeds the size of its parent

I am facing an issue with a footer div that contains various other elements, one of which is an image that exceeds the height of the footer container. The image is not displaying completely as it is being cut off by the parent div (footer). My goal is to ...

Other options for setting a background image in HTML emails aside from utilizing the background-img URL and avoiding the use of divs

I am struggling with creating the header section for an HTML email that is currently under construction. I am using background-img url for the image with content overlay, but unfortunately Outlook 2007, 2010, and 2016 do not support background-images on ta ...

Preventing Element Reload in Django Using AJAX Across Multiple Templates

NOTE: Updated base.html and refined title UPDATE 2: An example of what I'm referring to is the ticker showing x y z, then transitioning to a, b, c, and so forth. How can I maintain the position of the ticker when navigating pages so that if it's ...

Create a dynamic slideshow using a bootstrap carousel in conjunction with the powerful php glob() function

I'm struggling to create a homepage featuring a slider that pulls images dynamically from a subfolder within the Wordpress uploads directory. Here's my code: <div id="" class="carousel slide" data-ride="carousel"> <!-- Wrapper for sl ...

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

Issue with iPad CSS floats causing layout problems?

Having a css challenge with the layout on ipad for this particular website: When viewing on a browser, the social media icons align correctly to the right. However, on an iPad or iPhone, they are not aligned all the way to the right. Is there anything tha ...

Detection of a timeout while utilizing asynchronous Socket.BeginReceive

Exploring how to write an asynchronous Ping using Raw Sockets in F#, with the goal of enabling parallel requests while minimizing thread usage. I have chosen not to use "System.Net.NetworkInformation.Ping" due to its allocation of one thread per request, a ...

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

Preventing Repetition in an HTML List using JavaScript

My HTML list is populated with values from JSON, and I have a button on the page. <button onclick="printJsonList()">CLICK</button> This button triggers the following JavaScript function: function printJsonList(){ console.log(ctNameKeep); ...

Creating a minimalist metro-inspired menu using HTML and CSS

After researching online for a few days, I've just started learning HTML/CSS and my skills are currently at about a 6 out of 100. I have this code that functions as a blogger HTML widget, but I want to customize it further. Here is the code snippet: ...