I am in the process of building a website, but I lack skills in js and jQuery. I have been searching for days trying to find a library that supports the feature I need - zoom and thumbnails similar to Amazon or eBay product listing slider. However, most of the libraries I found are not quite what I'm looking for.
Can anyone provide some guidance on where I should start?
PS. I tried using swiper.js, but it only has zoom available on double click.
Last updated: 5/16/2017
Example:
Hey there! To get started, head over to this link and grab the slider plugin.
Next, go to your website's theme header and insert the mentioned JS and CSS code snippets, making sure to update the file paths for images, JS, and CSS files as needed.
Then, place the HTML sections where you want the slider to appear and replace the example dynamic products loop code with your own.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet>
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Options">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>I hope this process works smoothly for you. Simply make sure to adjust the file paths according to where they are located in your website's directories.
After setting the jqGrid row edit on the ondblClickRow event, how can I enable the save icon on the navigation bar when a row is double clicked? ondblClickRow: function (rowid) { jQuery(this).jqGrid('editRow', rowid, true, null, null); ...
As a newcomer to VueJs, I have a question regarding the best practice for importing components in a Vue Template Project. I currently have some components that are used in multiple views. After downloading an admin template, I noticed that the samples alwa ...
When incorporating the jQuery UI into a form, how can I retrieve the selected date from the date picker in the HTTP post method? This is how the date picker is implemented within the form: <div id="datepicker"></div> ...
Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...
I am encountering an issue with my Google Bar Chart where the bar label is not displaying outside of the bar when it is too large to fit inside. This behavior should be the default, but my charts are not working as expected. The problem can be seen in rows ...
I need to combine the first name and last name of a person into a single "Name" column in my Angular 7 data table. The first name and last name are stored as separate properties. <data-table [items]="userItems" [itemCount]=" ...
Is there a way to dynamically modify the color (background and text) of a single select menu in jQuery Mobile, without impacting other elements with the same class? I've experimented with various approaches, such as: $('#select').css({color ...
I am currently utilizing vue3-highcharts in conjunction with Highcharts. My goal is to replicate a similar functionality as shown in this example: https://codepen.io/lzl124631x/pen/KLEdby?editors=1010. However, I am unsure about the correct syntax for impl ...
I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...
I have successfully implemented a Vue Multiselect feature that retrieves options from my database using an axios call. This functionality works great as it allows users to select existing options or add new ones to create tags. While this setup is working ...
I am facing a challenge while building an ASP.Net 4.5 menu programmatically in C#. The main issue is that the formatting of the child items is not inheriting from the top menu items as expected. Specifically, I am struggling with two formatting aspects: St ...
In my react and redux application, I am using react final form with a 'cars' field that is a select. When the submit event is triggered, it should only return specific types like coupe: ['BMW'] instead of just the field name with values ...
My data structure is an array that looks like this: const myArray: number[][] = [[1,2,3],[4,5,6]] I am trying to find the index of a specific element within this multidimensional array. Typically with a 1D array, I would use [1,2,3].indexOf(1) which would ...
I have developed an Angular application that includes a table and buttons to switch between different data sources for the table. To enhance user experience, I want to display a spinner while switching data sources. However, I am facing an issue where th ...
After deploying to Heroku, I noticed that the css and javascript files in the 'public' directory were missing, resulting in 404 errors. Strangely, these files exist locally without any issues. In my app.js file, I have included the following: a ...
Could someone please help me figure out how to successfully load a JSON file into my project's app.js? I've tried using the following code snippet: var j = require('./JSON1'); However, it didn't work as expected. My goal is to la ...
Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...
I am attempting to create circular buttons for numbers, but I am having trouble centering the text within the button. Ideally, I would like to have 15 circular buttons numbered from 1 to 15. Below is the code snippet: body { padding: 1em; } <link ...
I have a project where I am creating an event registration system that shows the event registration list without refreshing the page using Ajax if the user is logged in. However, I encountered an issue when trying to login as I received an undefined index ...
Currently, I am utilizing the ElementUi uploader and facing an issue where the file details are not being sent correctly to the back-end along with my form data: Screenshots When I select an image, here is the console log: https://i.sstatic.net/StfNl.pn ...