Issue with initial width calculation of Slick slider

Having issues with implementing the Slick slider. The calculated width of each slide seems to be incorrect due to padding on the right side of the image.

<div class="responsive-slick">
    <img src="Gallery/large/01.jpeg">
    <img src="Gallery/large/02.jpeg">
    <img src="Gallery/large/03.jpeg">
    <img src="Gallery/large/04.jpeg">
    <img src="Gallery/large/05.jpeg">
    <img src="Gallery/large/06.jpeg">
</div>

$(document).ready(function(){
   $('.responsive-slick').slick({
       dots: true,
       mobileFirst:true,
       prevArrow: '<a class="slick-prev">Previous</button>',
       nextArrow: '<a class="slick-prev">Previous</button>',
       slidesToShow: 3,
       slidesToScroll: 8
   });

});

Output: https://i.sstatic.net/ZcYSQ.png

Not sure what's causing the issue. Any insights on this problem?

javascriptjqueryhtmlcssslick.js

Answer №1

Your current code is encountering an issue 

$('.responsive-slick').slick({
   dots: true,
   mobileFirst:true,
   **prevArrow: '<a class="slick-prev">Previous</button>',
   nextArrow: '<a class="slick-prev">Previous</button>',**
   slidesToShow: 3,
   slidesToScroll: 8
});

You have mistakenly combined an anchor tag opening with a button closing. This is incorrect.

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

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

Creating dynamic images with animated text using PHP

How can I add a personal touch to my website banners for visitors? 1) Currently, only the first frame of GIF images is being displayed in the animated banners 2) I am looking to incorporate a text field where users can input their desired text. Upon form ...

phpjavascriptjqueryhtmlgif

Modifying CSS stylesheet does not alter the background color

body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...

htmlcssbackground-color

Converting JSON data from ASP.NET MVC to a Canvas.js chart

Despite my efforts to find a solution by looking through similar posts, I am unable to resolve the issue. Within my asp.net MVC controller, I have a method called public object OfferChart() List<Det> obj = new List<Det>(); foreach ...

javascriptjsonasp.net-mvcobjectcanvas

Invoking a web service using jQuery remotely

This piece of code is causing issues for me when I try to host Data.ashx locally. Interestingly, it seems to work fine when I use the URL pointing to Data.ashx on my local machine. jQuery.ajax({ type : "GET", url: "http://aspspider.ws/ghadyAlham ...

jqueryajax

React application not displaying element properly?

I am facing an issue with my react modal that displays a sign-in and sign-up form. The problem arises when I try to access the button on the form using its id, which is modal-sign-in-submit-button. document.getElementById('modal-sign-in-submit-button ...

javascriptnode.jsreactjs

Troubleshooting MaterialUI Datatable in Reactjs: How to Fix the Refresh Issue

Currently, I am facing an issue with rendering a DataTable component. The problem is that when I click on the "Users" button, it should display a table of Users, and when I click on the "Devices" button, it should show a table of Devices. But inexplicably, ...

javascriptreactjsmaterial-ui

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

Suppose I have a customized modal directive that looks like this: return { restrict: 'E', templateUrl: 'modal.html', scope: { modalContent: "&", modalOpen: "&" } } And in the HTML: <ng-modal modal-content="co ...

javascriptangularjsdom

Comparing getElementById with $('#element') for retrieving the length of an input field

Consider the following scenario: <input type="text" id="apple"> Why does the first code snippet work? $(document).ready(function () { alert($('#apple').val().length); }); However, why does the second code snippet not work as expecte ...

javascriptjquery

Tips for structuring an object map with flow type to ensure that each value includes a corresponding key

In an attempt to correctly type (using Flow) a helper function called createReducer for Redux, I have utilized the code from redux-immutablejs as my starting point. I am following the recommendations from the flow documentation on typing Redux reducers, b ...

javascriptreactjsreduxflowtype

An issue occurred when trying to trigger a click event within a Blazor WebAssembly

While my dropdown menu option was working fine on a tablet-sized display, it suddenly stopped functioning after I published my project and ran the code in Visual Studio 2019 Preview version 16.10. I'm now seeing an error message in the browser console ...

javascriptbootstrap-4dropdownblazor-webassembly

Efficiently transferring components of a JavaScript project between files

For the first time, I am creating an npm package using ES6 and Babel. However, I am facing difficulties in connecting everything together so that it can be imported correctly by the end user. The structure of my build (output) folder is identical to src: ...

javascriptnpmecmascript-6package.json

What are the steps to utilizing dynamic data from a file in JavaScript?

I've got a Python script constantly generating data, and I'm looking to use that data to make some changes to an object in JavaScript. Is there a method to accomplish this? ...

javascriptpythonjsondatabase

The React syntax is malfunctioning

componentDidMount() { const restaurants = Restaurant.all() restaurants.then( rests => { this.setState({ restaurants: rests }) }) } render() { const { restauran ...

javascriptnode.jsreactjssyntax

Can you uncover the secrets of static generator functions through espionage?

My current project involves an utility function that exposes a generator: export class Utility { // This utility function provides a generator that streams 2^n binary combinations for n variables public static *binaryCombinationGenerator(numVars: ...

javascripttypescriptjasminesequence-generators

Is there a more effective method to return a response apart from using a redundant function?

function unnecessaryFunction(){ let details: SignInDetails = { user: user, account: account, company: company }; return details; } I am being told that the details value is unnecessary. Is there ...

javascripttypescript

The jQuery namespace does not function as intended

Whenever I attempt to execute the code below, I consistently encounter an error message indicating that .call is not a function. I am puzzled by this issue as the code appears to be quite simple. It seems like I am overlooking something obvious here. Your ...

jquery

When the mouse leaves, the background image will revert back to its original setting

https://i.stack.imgur.com/Ojd0Q.pngI need assistance in reverting a div's background image back to its default state using the onmouseleave method. Below is the HTML and JS code I have been working on: <script type="text/javascript"> functi ...

javascripthtmlcssimage-gallery

Ajax search implementation presents challenges in Laravel development

I have been working on my own custom PHP application. I'm trying to add a search feature using AJAX, but my code doesn't seem to be functioning correctly. index.php <?php if (isset($_POST['search'])) { // Perform search fu ...

jqueryajaxlaravel

How can I use VueJS Cli to create a shared variable that is accessible across all pages and can be monitored for changes within a specific page?

Recently, I've delved into the world of VueJs and I'm encountering some issues with a project that I can't seem to resolve through online resources. I am trying to establish a variable that is common across all pages (month), and whenever t ...

javascriptvue.jscommand-line-interface