I'm using jCaousel 0.3.3, jQuery 1.9.1. I'm seeing no errors, but slides do not change (move).
HTML code:
<div class="views-field jcarousel-wrapper">
<div class="field-content jcarousel">
<ul>
<li class="first"><img width="1140" height="380" src="http://jonevans.photography/galleries/landscape/photos/jme_20141101_wilton_0001.jpg" typeof="foaf:Image"></li>
<li><img width="1140" height="380" src="http://www.moargut.com/%28cms%29/media/resize/size=1140x380,scale=crop/1032683" typeof="foaf:Image"></li>
<li class="last"><img width="1140" height="380" src="http://www.girosole.com/assets/images/tourpics/tourpic-guht1.jpg" typeof="foaf:Image"></li>
</ul>
</div>
</div>
JavaScript:
$('.jcarousel').jcarouselAutoscroll();
Fiddle: http://jsfiddle.net/12Lst30m/3/
Could someone give me any advice? What I am doing wrong?
Related
I have two column, in first column there is a list where I want to click and change slide in mobile frame, i.e. following is my html
<div class="convenience-wrapper">
<div class="convenience-content">
<h3>Convenience</h3>
<ul class="list-unstyled">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div class="mobile-wrapper">
<div class="mobile-frame">
<img src="images/mobile-frame.png" alt="Mobile Frame" />
</div>
<div class="mobile-screens">
<img src="images/order-on-app.png" alt="Order on App" />
<img src="images/flexible-quantity.png" alt="Flexible quantity" />
<img src="images/buy-now-pay-later.png" alt="Buy now pay later" />
<img src="images/scan-qr.png" alt="Scan QR" />
</div>
</div>
</div>
I want to click on left side list i.e. one, two, three and want to change slide/image in "mobile-screens" div.
I have searched a lot but everyone is repositioning and changing slick dots style, I want dots functionality at my own custom design list, anyone can guide me how to to that.
Here is my take on it:
jQuery(document).ready(($) => {
$("#mySlider").slick({
infinite: true
})
$("#myNavList > li").click((e) => {
let element_index = [...e.target.parentElement.children].indexOf(e.target)
$("#mySlider").slick("slickGoTo", element_index)
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div>
<ul id="myNavList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="mySlider" style="max-width: 100%">
<img src="https://picsum.photos/200?1"/>
<img src="https://picsum.photos/200?2"/>
<img src="https://picsum.photos/200?3"/>
</div>
</div>
I would personally not use the element_index method in production but this is just a quick demo code to explain what tools you can use to achieve what you asked for.
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I am using the JQuery revolution slider on a website.
Everything works great but I need some help in linking to a specific slide.
After clicking on a navbar link I would like the slider to scroll to a specific slide (using an id or index maybe).
How can I implement this?
A simplified version of the code for the slider looks like this:
<div class="rev-slider-container">
<div class="rev-slider">
<ul>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide2" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide3" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
Take a look at this https://www.themepunch.com/revsliderjquery-doc/api-methods-events/#methods.
You can navigate to a particular Slide by doing this:
revapi.revshowslide(2);
after loading the slider like this:
<script type="text/javascript">
var revapi = jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
waitForInit: true,
/* SLIDER SETTINGS CONTINUED */
});
});
// only start the slider once the entire window has loaded
jQuery(window).one('load', function() {
revapi.revstart();
});
</script>
Here is my Fiddle I am currently working with. http://jsfiddle.net/Nemi9/76JPk/29/
I want keep everything sortable, but want to add the editable function to all the ul on a click or mouse down. I am currently trying to make each list and any new items added to each list .editable they are currently all .sortable. The top code is the code I am currently using to try to make lines 17- 45 in HTML editable when clicked on. I want the person to be able to click on each listed item and add their own text inside the field.
I put contenteditable= true into each list id
These lines below are 63- 66 in .JS
var editable1 =$("#names,#homes,#purchased").editable();
$("#names,#homes,#purchased",editable1).click(function(ev){
$("#names,#homes,#purchased").input(type=submit)
Here is my current HTML
<div class="box1">
<h3>Needed Items</h3>
<ul id="names" contenteditable="true"/>
<li class="ui-state-default">Carrot</li>
<li class="ui-state-default">Onion</li>
<li class="ui-state-default">Water</li>
</ul>
</div>
<div class="box2">
<h3>Home Items</h3>
<ul id="home" contenteditable="true"/>
<li class="ui-state-default">Cookies</li>
<li class="ui-state-default">Milk</li>
<li class="ui-state-default">Chicken</li>
</ul>
</div>
<div class="box3">
<h3>Purchased Items</h3>
<ul id="purchased" contenteditable="true"/>
<li class="ui-state-default">Potato</li>
<li class="ui-state-default">Rum</li>
<li class="ui-state-default">Coke</li>
</ul>
</div>
I use the Kendo UI splitview.
I created one pane (left) for the navigation and one pane (right) for the content.
I got 4 Navigation links for the left pane like this:
<div data-role="pane" id="side-pane" data-layout="side-default"
data-transition="slide">
<div data-role="view" data-title="test" id="side-root">
<ul data-role="listview" style="height: 250px" data-style="inset"
data-style="inset" data-type="group">
<li>Categories
<ul>
<li onclick="createChart()" data-icon="arrow-e"><a>1</a></li>
</ul>
<ul>
<li onclick="createLineChart()" data-icon="test"><a>2</a></li>
</ul>
<ul>
<li onclick="createMap()" data-icon="world"><a>3</a></li>
</ul>
</li>
</ul>
</div>
</div>
and for the right pane one div's for the map and two div's for the charts like this:
<div data-role="pane" data-layout="main-default" id="main-pane">
<div id="forms" data-role="view" data-title="Form Elements"
data-init="initForm" data-use-native-scrolling="true" data-show="detailViewShown">
<div id="map" ></div>
<div id="chart"></div>
<div id="linechart"></div>
</div>
The Problem is: when I click on "1" the chart created perfectly. After that happened i click on "2" and the new chart should be created and the old one should be removed, but the new chart appears under the chart "1". How can I refresh or set the right pane content new after the click on navigation items? The same problem for the map.
You should have to change data-init to data-show
<div data-init="initForm">
to
<div data-show="initForm">
Here is the explanation:
difference between data-show and data-init