Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions.

Code Snippet:

<div class="carousel-inner">
<div class="item active">img here</div>
<div class="item">img here</div>
  <div>
    <div class="flexslider">
      <ul class="slides">
        <li> img here</li>
        <li>img here</li>
      </ul>
    </div>
  </div>
</div>

Script:
$('.flexslider').flexslider({
  animation: "slide"
});

If you have alternative sliders or suggestions for nested sliders, please share. Assistance is appreciated.

Answer №1

To use Flexslider 2.2 with jQuery 1.7, you must first download and include jquery.flexslider-min.js and flexslider.css from the link provided at this page. Next, add the following JavaScript code to your webpage:

<script type="text/javascript">
$(window).load(function() {
// Initialize the slider synced with carousel
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>

Ensure that your HTML structure is as follows:

<div id="slider" class="flexslider">
<ul class="slides">
<li>
  <img src="slide1.jpg" />
</li>
<li>
  <img src="slide2.jpg" />
</li>
<li>
  <img src="slide3.jpg" />
</li>
<li>
  <img src="slide4.jpg" />
</li>

</ul>
</div>

<div id="carousel" class="flexslider">
<ul class="slides">
<li>
  <img src="slide1.jpg" />
</li>
<li>
  <img src="slide2.jpg" />
</li>
<li>
  <img src="slide3.jpg" />
</li>
<li>
  <img src="slide4.jpg" />
</li>  
</ul>
</div>

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

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

The success variable of the Ajax running continuously in a loop is not being refreshed

Within this code snippet, a for loop is utilized to iterate through an array called netnos[] and update the variable 'nets' for each item. Ajax is then invoked to call a PHP script that generates a listing, which is successfully outputted to the ...

Double Checkbox

My current project involves creating an update page, and I have successfully completed most of it except for the checkbox section. Strangely, the checkboxes are being duplicated, and I haven't been able to identify the reason behind this issue yet. Th ...

Utilizing JQUERY to modify the 'top' attribute upon clicking

I am attempting to implement a vertical scroller using jQuery, but I'm encountering difficulties with my code. function scrolldown() { var newtop = $('.scroll-content').css('top') + '250'; $('.scroll ...

Can a variable containing HTML code be iterated through with a loop?

I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

Sorting columns using custom conditions in DataTables

Within a PHP project I am working on, I have encountered a need to organize a specific column using a custom condition or order rather than relying on the default ordering provided by DataTable (ascending or descending). The project involves four distinct ...

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax() Here's my HTML: <div id="waiting_div"></div> This is the CSS: #waiting_div { position: fixed; top: 0px; left: 0px; height: 100%; ...

Receiving the latest global variable in JavaScript using jQuery

I keep receiving undefined type for: $(".ui-slider-handle").attr("title", '"'+current+'"'); Even though I can successfully alert the updated value of current on line 29, it seems to not be working with .at ...

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

Stylish curved bottom border

Is it feasible to create this footer using just CSS? Appreciate the help! ...

What is the best method for eliminating the initial character in every line of a textarea?

The desired output should display as LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no instead of >LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no. Is there a way to achieve this using JavaScript? Specifically, the ">" character at the be ...

Demonstrating information using a HighCharts pie graph in a Visual Studio web application

Here is a snippet of code that supplies data for the chart within the View: series: [{ type: 'pie', name: 'Chart Title', data: @Html.Raw(Json.Encode(Model)) }] This piece of code can be foun ...

What are your thoughts on CSS alignment?

Having difficulty aligning unordered lists the way I want. Below is an image of my desired layout, looking for guidance on achieving the version on the right side. I will be using between 1 and 6 unordered lists on different pages, so a universal solution ...

Attempting to transform a numerical value into CSS syntax

Currently, I am attempting to loop through several DIV elements, extract a numerical value from each DIV, and then based on that value matching a specific value in the JavaScript code, assign a particular CSS Class back to the original DIV. This is the sn ...

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

The jQuery load() method may not load all elements

I've been struggling with a query issue for quite some time now. I have a Content Management System that I want to integrate into my website, but unfortunately, I am unable to use PHP includes. As an alternative, I decided to utilize jQuery instead. D ...

After a link is clicked in the Rails web app, the style undergoes a subtle transformation

Encountering an issue with my HTML/CSS that seems to be connected to Rails and its asset pipeline. Initially, the styling of my web app is perfect on the first page load (and hard refreshes). However, as soon as I click on a link, navigate away from the pa ...

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...