As I'm designing a website, my goal is to showcase products using sliders. I've implemented both a simple Carousel slideshow and a multi-item Slide Show on the same page. The multi-item Slide Show has a specific CSS class associated with it.
The issue arises when I include the CSS class reference for the multi-item Slide Show together with the simple Carousel slideshow. This results in disruption of the simple Carousel functionality and the multi-item Slide Show not functioning correctly.
I initially tried using a multi-item Slide Show that didn't require a separate CSS file and worked perfectly fine. However, this version didn't adhere to responsive design principles which are crucial for my project. Hence, I prefer not to use such a non-responsive multi-item Slide Show.
I suspect there's a conflict between my pure Bootstrap CSS code for the Carousel and the CSS file for the multi-item Slide Show. How can I resolve this issue?
UPDATE
Below is a snippet of the code:
<link href="~/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="~/bootstrap-4.3.1-dist/js/bootstrap.js"></script>
Code for the simple Carousel Slideshow in index.cshtml View:
(Simple Carousel HTML code)and multi-item Slide Show in index.cshtml View:
(Multi-Item Slide Show HTML code)Additionally, here's the CSS code included in the project:
@media (min-width: 768px) {
/* Custom CSS styling */
}
And the JavaScript used:
(JavaScript function code)Despite implementing these components, the simple Carousel disrupts and the multi-item Carousel fails to display anything or work as intended.