I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, please?
I trust that this snippet will be of assistance to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>lightSlider Demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="../src/css/lightslider.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
ul{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<script src="../src/js/lightslider.js"></script>
<script>
$(document).ready(function() {
var count = 0
$('#myModal').on('shown.bs.modal', function () {
if (count === 1) return;
$('#image-gallery').addClass('cS-hidden');
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
count++;
});
});
</script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg myModal" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="demo">
<div class="item">
<div class="clearfix" style="max-width:474px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-5.jpg">
<img src="img/cS-5.jpg" />
</li>
<li data-thumb="img/thumb/cS-6.jpg">
<img src="img/cS-6.jpg" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
It seems there is a recurring problem with lightslider when used on modals. If you encounter this issue, you can refer to this GitHub thread, which unfortunately remains unresolved. In such cases, it may be worth exploring alternative options such as lightbox, magnific popup, or owl-carousel to accomplish similar functionality.
Encountered a similar issue where the slider was assuming the modal size to be 0 when collapsed, resulting in setting the height and width to zero.
To resolve this, it is necessary to resize the slider (or window) once the modal window is opened to accommodate the new size.
In my scenario, I included the onclick="refresh_slider();" function in the activation button:
<!-- Button trigger modal -->
<button onclick="refresh_slider();" type="button" class="btn btn-secondary animate-up-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Open
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">label</h5>
<button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- slider -->
</div>
<div class="modal-footer">
<button type="button" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Subsequently, add a script that triggers the window resize within that function:
function refresh_slider(){
$(window).resize();
}
I am facing an issue where my parameter articleid is not being passed to the route /createAnswer. When I log articleData._id, it shows the correct ID (e.g., 60b4f5d8c8be1d4cb0cdd6ca) that I want to pass to the route /createAnswer. const createAnswer = () = ...
Could this be converted in a different way? $('#id').testfunction({ 'source' : [ {'source':'pathimage.jpg','title':'Title 1','description':'This is a description 1.'}, ...
Imagine having a MongoDB collection that consists of an array of objects being retrieved from an Angular Resource. [{_id: "565ee3582b8981f015494cef", button: "", reference: "", text: "", title: "", …}, {_id: "565ee3582b8981f015494cf0", button: "", ref ...
My SPA application is built using Websocket, Polymer, ES6, and HTML5. It is hosted on a Jetty 9 backend bundled as a runnable JAR with all resources inside. I want to implement a feature where upon deploying a new version of the JAR, I can send a message ...
I'm having trouble with my update function. It's not a database issue because delete works fine. Here is the code for my Update route: Can someone please assist me? I've been using console.log to display values in the console, and they all ...
I am struggling with retrieving values from jQuery/AJAX and displaying them in an HTML form within the index.php file. This is what my index.php looks like: <script type="text/javascript"> $(document).ready(function () { $('#display'). ...
The TypeScript function listed below demonstrates the functionality: const handleMouseDownHome = (e: any) => { // Only activates when scroll mouse button is clicked if (e.button === 1) { window.open("/", "_blank", " ...
I am encountering an issue with the following code: function inicioConsultar(){ $(function(){ $('#serviciosU').change(function(){ if ($('#serviciosU').val()!= "-1") { $.ajax({ url: "@Url. ...
Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...
Why is the background image not appearing as a full image on large screens but fitting fine on small screens? <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8" dir="ltr" /> <title ...
I am encountering an issue when trying to redirect the page to another page. Everything works fine with the first post request, but starting from the second one, I keep getting this error message: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after t ...
I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...
When using the input type text, adding the required attribute prevents the form from submitting and prompts the browser to focus on the required field with an alert instructing to fill it out. On the other hand, when applying the required attribute to t ...
It is known that the display type table-cell does not work with text-overflow ellipsis. However, this is where my issue lies. I am dealing with a file input control that appears like this: <div class="ui-select form-input" style="display:inline-block; ...
I am currently working on a project where I need to implement the following code snippet: <template v-for="(element, k) in place.data.content"> <data_elements[element.name].component></data_elements[element.name].component> </te ...
Creating Dynamic Surveys <script type="text/x-jsrender" id="surveyTemplate"> <li class="question"> <input type="text" name="survey[question]" /> <button class="add_answer">Add Answer</button> <ul> ...
Examining JavaScript code optimized for a performance-sensitive environment, specifically a game engine in mobile settings. Oftentimes, this code avoids using local variables and instead relies on explicit chains, such as: if (this.x.y[z].i) { this.x ...
Apologies for any language issues. I am wondering about using "get" in JQuery when the url is an action reachable from the browser. In my js file: $.get('/user').success(function(data) { availableTags = data;} ); This is my controller: class U ...
Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...
As I delve into my project, my main focus lies on detecting errors within a component. The ultimate goal is to seamlessly redirect to the home page upon error detection or display an alternate page for redirection. I am seeking a programmatic solution to ...