Develop Reference

Is there way to reset slider to image 1?

I am trying to create a slider that will work on hover but there is one thing I would like to add is reset. For example, if visitor hovers on the slideshow and he is on 4th image then when he hovers out and hover on it again then slide should start from image 1, not from image 4.
Please Help!
Here is the code.
jQuery(function($) {
$('.slides').cycle({
fx: 'none',
speed: 4000,
timeout: 70,
}).cycle("pause");
$('.slideshow-block').hover(function() {
$(this).find('.slides').addClass('active').cycle('resume');
}, function() {
$(this).find('.slides').removeClass('active').cycle('pause');
});
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block {
position: relative;
width: 1150px;
height: 530px;
overflow: hidden;
background: url('img/3-1.png');
}
.slides {
z-index: 0;
visibility: hidden;
}
.slides.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slideshow-block">
<ul class="slides">
<li><img src="img/3-1.png" /></li>
<li><img src="img/3-2.png" /></li>
<li><img src="img/3-3.png" /></li>
<li><img src="img/3-4.png" /></li>
<li><img src="img/3-5.png" /></li>
<li><img src="img/3-6.png" /></li>
</ul>
</div>

This may help you:
$('.slideshow-block').hover(function(){
setTimeout(function () {
$('.slides').cycle(0);
}, 100);
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').removeClass('active').cycle('pause');
});

Thumbnail grid is displayed in a column

I'm trying to create a grid of several thumbnail images but I have the same problem, which is that my images are in columns. Indeed, I have one image per line, whereas I want as many as possible.
Here is an example of what I want to achieve:
https://codepen.io/pjhooker/pen/lFuDK
<div>
<ul>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
<li><img src="http://placehold.it/150x150" /></li>
</ul>
</div
The problem is that even with this code my images remain in columns underneath each other
Here's what I have in my code:
<template>
<div>
<div>
<div class="hex-row even">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
<div class="hex-row">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
<div class="hex-row even">
<Hexagon v-for="n in 7" v-bind:key="n"/>
</div>
</div>
<div style="margin-top: 300px;">
<ul>
<li v-for="img in images" v-bind:key=img>
<v-img max-width="48px" max-height="48px" v-bind:src=img />
</li>
</ul>
</div>
</div>
</template>
<style scoped>
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
ul {
list-style: none;
}
li img {
float: left;
margin: 10px;
border: 5px solid #fff;
transition: all .3s ease;
}
</style>
<script>
import Hexagon from './Hexagon'
export default {
data: () => ({
images : [url, url, url...]
}),
components: {
Hexagon,
}
}
</script>
With the code above, I have images of 48px * 48px that are arranged one below the other.
I want the images to be next to each other. As soon as there is no more space on the line, the sequence continues on the next line

You should add a display:flex; flex-wrap:wrap to the parent container
Here is a similar pen using div elements instead of li
https://codepen.io/chrismclarke/pen/ExYZxbG

Apply following code in your CSS.
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

combine two scrolls - gallery with horizontal scroll

I'm trying to create a simple gallery with vertical scroll. This scroll should cause two things: 1.move small pictures below the big photo and 2.change the source of the big photo (so it will change the big photo in result). I'm not got at describing what exactly I want to do so here is the code:
html:
<div class="container">
<div class="bigPhoto">
<img />
</div>
<ul>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=1' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=2' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=3' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=4' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=5' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=6' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=7' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=8' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=9' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=10' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=12' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=13' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=14' /></li>
<li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=15' /></li>
</ul>
<input type=range id='scroller' />
css:
ul {
border:1px solid orange;
list-style-type: none;
text-align: center;
margin:0;
padding:0;
max-height: 50px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;}
li {
display:inline-block;}
img {
width:50px;}
.fullSize {
width:100%;
height:100%;}
js:
var smallImages = document.querySelectorAll('li img');
var bigPhotoDiv = document.querySelector('.bigPhoto img');
var scroller = document.querySelector('#scroller');
bigPhotoDiv.src = smallImages[0].src;
bigPhotoDiv.classList.add('fullSize')
scroller.max = smallImages.length-1;
scroller.addEventListener('change', function(event) {
var currentLink = smallImages[scroller.value].src;
bigPhotoDiv.src = currentLink;
});
https://jsfiddle.net/0d2z26e1/
Now I have two scrolls, lower for changing my bigPhoto and upper for moving small images. Is it possible to combine them into one?

Multiple slideshow in a table using jquery

I am trying to get a slideshow to fit correctly in a table. I am new to jquery. I want to fit it within cells of the table. I have tried to adjust the slideshow "li" attribute but can't get it to work. Please help me to achieve this. Here is my code,
Code:
In head section
<script type="text/javascript" src="jquery1.2.6.min.js"></script>
<script src="jquery.slideshow.js"></script>
<style>
.slideshow {
position: relative;
}
.slideshow li {
position: absolute;
top: 0;
width: 310px;
height: 86px;
display: table-cell;
list-style: none;
}
.slideshow li:first-child {
display: block;
}
.slideshow-2 {
top: 0px;
}
</style>
<script>
document.documentElement.className += 'js';
</script>
<script>
$(function () {
$('.slideshow').slideshow({ timeout: 2000, speed: 1000 });
});
</script>
In body section
<table align="center" cellpadding="0" cellspacing="0" border="0" width="660">
<tr>
<td align="center" width="320">
<ul class="slideshow">
<li><img src="images/00accord.jpg" height="86" width="310"></li>
<li><img src="images/00grandprix.jpg" height="86" width="310"></li>
<li><img src="images/00mercedes.jpg" height="86" width="310"></li>
<li><img src="images/01cadillac.jpg" height="86" width="310"></li>
<li><img src="images/01century.jpg" height="86" width="310" /></li>
<li><img src="images/01ptcruiser.jpg" height="86" width="310" /></li>
</ul>
</td>
<td align="center" width="320">
<ul class="slideshow slideshow-2">
<li><img src="images/01ram.jpg" height="86" width="310"></li>
<li><img src="images/02mazda.jpg" height="86" width="310"></li>
<li><img src="images/03nissan.jpg" height="86" width="310"></li>
<li><img src="images/03stratus.jpg" height="86" width="310"></li>
<li><img src="images/03stratusrt.jpg" height="86" width="310" /></li>
<li><img src="images/05sebring.jpg" height="86" width="310" /></li>
</ul>
</td>
</tr>
</table>

jQuery submenu position bug

I`m trying to create menu which is opening on clicking parent element and closeing on mouseleave from that one which was opened a while ago. It should work from left to right
Here is
<ul class="menuFirst">
<li><img src="img/ico1.png"></li>
<ul class="">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
</ul>
Here is CSS
ul.menuFirst{
list-style-type: none;
border-top: #AAA solid 3px;
border-right: #AAA solid 3px;
border-bottom: #AAA solid 2px;
position: absolute;
left: 0px;
top: 70px;}
ul.menuFirst li{
background: #DDD;
border-bottom: #AAA solid 1px;
}
ul.menuFirst li img{
margin:5px;
}
ul.menuFirst ul{
display: none;
}
ul.menuFirst ul.menuSecond {
list-style: none;
display: table;
position: absolute;
left: 30px;
}
ul.menuFirst ul.menuSecond li{
display: table-cell;
}
And here is jQuery
<script>
$(document).ready(function(){
$("ul.menuFirst li").click(function(){
$(this).next().toggle();
var ypos= $(this).next().position();
alert(ypos.top);
$(this).next().css('top','-=38');
$('ul.menuFirst ul.menuSecond').one('mouseleave',function(){
$(this).css('top', '+=38').toggle();
});
});
});
It works for 1st element but it's pretty buggy. When I'm trying to add .animate() It just didn't work. So I`ve decided to take step back and unbug this one but i don't know how. It should looks like this:

Your HTML is not correct use this
<ul class="menuFirst">
<li><img src="img/ico1.png">
<ul class="">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
</ul>

Ok, I`ve fix it....
$('ul.menuFirst ul').each(function(){
$(this).css('top', '-=38').hide();
});
This is executing where DOM is ready I don't need to change position each time while I`m opening or closeing it.
$("ul.menuFirst li").click(function(){
$(this).next().toggle("slide",
{direction: "left"})
});
$('ul.menuFirst ul.menuSecond').mouseleave(function(){
$(this).hide("slide",
{direction: "left"});
Nextly I`m ussing this to animate it.