Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I cannot select or click on it.

After researching, many sources suggest that I should use position:relative to solve the z-index issue. One example is this discussion: Slick slider text on top of images

Despite following the recommendations in the provided answers, changing the position and adjusting the z-index values did not yield any changes.

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
  z-index: 1200;
}

.slick-slide, .slick-track, .slick-list, .slick-slide-fade {
    /* ... */
    position: relative;
}

To view the complete code, please refer to my fiddle: https://jsfiddle.net/gnrqhk32/6/#&togetherjs=4RVVzljQI4

javascriptcss

Answer №1

Here is the solution to your issue:

.slick-slide, .slick-track, .slick-list, .slick-slide-fade {
  /* ... */
  position: relative;
  z-index:100;
}

Simply include this CSS code and you will have functionality to click on both the link and dots.

Make sure to remove the z-index from the .carousel-caption section.

I tested it and verified that both options are now clickable.. please confirm after implementing these changes.

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

Synchronize the completion of multiple promises in ExpressJs before sending a response

My POST API contains some logic that needs to wait for all promises to finish before sending the response. However, I'm facing an issue with making my server wait using await Promise.all(tasks); I've tried various approaches and even used librar ...

javascriptnode.jsexpresspromise

How can I rename attribute values in a dropdown menu and ensure they work properly?

I'm facing an issue with my code. How can I store the option values in a database when they have numbering like value="1" or value="2"? Can I change it to something like value="1000" and have the other select box change to value="250" when selected? ...

javascriptjqueryhtml

Utilize dojo to manually trigger a window resize event

Is there a way to manually trigger the window resize event (the one that occurs when you resize your browser window) using Dojo? I need this functionality to dynamically resize my C3 Charts. I came across the on module in Dojo, which allows for listening ...

javascriptdojoc3

Error: Trying to assign a value to a null property

I am facing an issue while trying to dynamically create "iframe's textarea" and insert the value of a variable. Unfortunately, I keep encountering an error. Any suggestions on how to resolve this problem? P.S: Using Google Chrome as the browser ...

javascriptiframetextarea

Error: Unable to access _rawValidators property of null object

I'm currently facing an issue with formgroup and formcontrol in Angular. When I run ng serve, it's showing an error in the console. Does anyone have a solution for this? TypeError: Cannot read properties of null (reading '_rawValidators&a ...

javascriptangulartypescript

Vue router beforeRouteEnter - when the page is refreshed, the button label vanishes

<script> export default { name: 'TEST', data() { return { prevRoute: '' } }, methods: { goBack() { return this.$router.go(-1); }, }, beforeRouteEnter(to, from, next) { next(vm => { ...

javascriptvue.jsmethodsvue-routerbeforerouteenter

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

javascriptphphtmlnode.jsexpress

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

Is it possible to incorporate FCM into Next.js and effectively handle server-side events for FCM on Next.js servers?

Is it feasible to incorporate the Firebase Cloud Messaging (FCM) into my upcoming Next.js application? Can I manage both client-side and server-side modules within the server side? ...

javascriptreactjsfirebasenext.js

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...

jqueryhtmlcssscroll

Error in routing of submit button in Express.js

While attempting to create a basic "to-do list" using HTML requests, I encountered an issue with the PATCH request. Instead of redirecting to "/", it redirected to "/posts/2" and displayed the message "Cannot POST /posts/2", without updating the array elem ...

javascriptexpressejs

When I close all of my tabs or the browser, I aim to clear the local storage

Could you recommend any strategies for clearing local storage upon closing the last tab or browser? I have attempted to use local storage and session storage to keep track of open and closed sessions in an array stored in local storage. However, this meth ...

javascriptreactjsangular

Combine two sets of JavaScript objects based on their positions using Underscore.js

Data Set 1: {id: "01", name: "John Doe", age: "25", city: "New York", country: "USA"} Data Set 2: [{key:'id', value:'01'},{key:'name', value:'John Doe'},{key:'age', value:'25'},{key:'city& ...

javascriptunderscore.js

Dynamically filling a second dropdown menu according to the selection made in the first dropdown using AJAX and PHP

Help! I'm feeling a bit overwhelmed. Even though this question has been answered multiple times, I still can't figure it out. There must be something so obvious that I am missing. I want the options in the second select input to be populated dyn ...

javascriptphpjqueryajaxmysqli

Show only the selected option with jQuery's on change event and disable or remove the other options

My goal is to make it so that when a user selects an option from a dropdown menu, the other options are disabled or hidden. For example, if option "1" is selected, options "2", "3", and "4" will be removed: <div class="abc"> <div class="xyz"> ...

javascriptjqueryhtmlselectonchange

Here's a way to run JavaScript code from a <script> tag included in an AJAX response

Currently, I am making a jQuery GET request in this format: $.get($(this).attr("href"), $(this).serialize(), null, "script"); I'm expecting the response to be enclosed in script tags. I know that the browser won't run the response if it contai ...

javascriptajaxjquery

Angular allows for dynamic sourcing of iframes

I have encountered an issue while trying to integrate a payment system with Angular. The payment gateway API I am using provides the 3D Secure Page as html within a JSON response. My approach is to display this html content within an iframe, however, the h ...

javascriptangular

Transforming Lapton images into JPEG format on the fly

I have been working on a project where I am compressing jpeg images to .lep format. Now, I have created an .exe file that can convert the .lep image back to jpeg. My goal is to write a simple JSP script that can decode the .lep image on-the-fly and displ ...

javascript

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Utilizing Node JS to transfer information from an array of objects into a Postgres table

After spending the entire day trying to work with JSON data and Postgres, I still can't figure out what's causing the issue. This is a snippet of my dataset, consisting of around 1000 objects: { avgHighPrice: null, highPriceVolume: 0, ...

javascriptnode.jsjsonpostgresql