Тёмный

simple responsive Image slideshow in pure javascript 

The WebShala
Подписаться 40 тыс.
Просмотров 68 тыс.
50% 1

hi guys, in this video you will learn how to create a simple image
slideshow .
Please LIKE our Facebook page for daily updates..
/ the-webshala-109434944...
Source Code:
drive.google.com/file/d/1qSLr...
All Slider Playlist:
• Javascript sliders
Please don't forget to like ,comment, subscribe and share
Thanks For Watching
Your Queries:
image slider in html,
image slider in bootstrap,
image slider in javascript,
image slider using bootstrap,
image slider animation,
image slider animation css,
image slider bootstrap 4,
image slider by javascript,
image slider by jquery,
image slider button in html,
image slider box css,
image slider buttons,
image slider before and after,
image slider background css,
image slider css,
image slider css html,
image slider css javascript,
image slider css only,
image slider carousel javascript,
image slider code in html and css,
image slider code in html and css download,
image slider code in jquery,
image slider effects in css,
image slider for website,
image slider fade effect,
image slider html,
image slider html css javascript,
image slider html and css bootstrap,
image slider html and css hindi,
image slider html and css only,
image slider html and css tutorial,
image slider html and css in tamil,
image slider jquery,
image slider javascript,
image slider js,
image slider jquery in hindi,
image slider javascript in hindi,
image slider jquery plugin,
image slider jquery tutorial,
image slider javascript only,
image slider javascript array,
make image slider in html,
image slider owl carousel,
image slider only css,
image slider plugin,
image slider using html and css only,
image slider using html css and javascript,
image slider using js,
image slider using javascript,
image slider using html and css,
image slider with javascript,
image slider with js,
image slider (1/3) html5 css3 and javascript,
image slider (2/3) html5 css3 and javascript
#slider #javascript #html #css

Опубликовано:

 

11 июл 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 119   
@hmza-themes4786
@hmza-themes4786 4 года назад
Thank you bro , can we make it auto-play ?
@TheWebShala
@TheWebShala 3 года назад
var slides=document.querySelector('.slider-items').children; var nextSlide=document.querySelector(".right-slide"); var prevSlide=document.querySelector(".left-slide"); var totalSlides=slides.length; var index=0; nextSlide.onclick=function () { next("next"); resetTimer(); } prevSlide.onclick=function () { next("prev"); resetTimer(); } function next(direction){ if(direction=="next"){ index++; if(index==totalSlides){ index=0; } } else{ if(index==0){ index=totalSlides-1; } else{ index--; } } for(i=0;i
@user-ev7oq7un6u
@user-ev7oq7un6u 3 года назад
@@TheWebShala thank yoyu verry much
@karamveersachdeva935
@karamveersachdeva935 3 года назад
Simple and awesome
@Pablotroll100
@Pablotroll100 3 года назад
It's perfect thank u!!
@tranhai625
@tranhai625 3 года назад
83 / 5000 Kết quả dịch Thank you very much. Here is the most helpful slide show tutorial video I've ever seen.
@TheWebShala
@TheWebShala 3 года назад
Thank you too
@ArtOfFun
@ArtOfFun 4 года назад
*Perfect work. Thanks!*
@sahiraahamed
@sahiraahamed Год назад
Helpfulll😊✌
@katakslim
@katakslim 3 года назад
Thank you sir for helping my project.
@MdNaimurRahmanHera
@MdNaimurRahmanHera 2 года назад
Thanks for the source codes ❤
@brightamponsah7946
@brightamponsah7946 4 года назад
impressive
@mpsamy_vj752
@mpsamy_vj752 3 года назад
Amezing 👏
@TheWebShala
@TheWebShala 3 года назад
Thank you
@matheuseli165
@matheuseli165 3 года назад
Thank you so much for this!
@TheWebShala
@TheWebShala 3 года назад
Glad it was helpful!
@oguzturkyilmaz543
@oguzturkyilmaz543 5 месяцев назад
Thank you very much
@jahirrana8879
@jahirrana8879 4 года назад
Thank You 😍
@ahsaankhan3833
@ahsaankhan3833 3 года назад
Thank you bro, it's awesome
@TheWebShala
@TheWebShala 3 года назад
Welcome 😊
@codeninja7653
@codeninja7653 2 года назад
This is really simple and helpful for me. Thank you.🙏
@TheWebShala
@TheWebShala 2 года назад
Glad it was helpful!
@RendyEunike
@RendyEunike 4 года назад
you got hi and thanks from indonesian! thank you so much for helping me learning
@TheWebShala
@TheWebShala 4 года назад
Happy to hear that!
@timmytim9054
@timmytim9054 4 года назад
Nice music.
@Gh8st
@Gh8st 3 года назад
wow! es increíble
@TheWebShala
@TheWebShala 3 года назад
Thank you
@Aditya-lc5uk
@Aditya-lc5uk 4 года назад
Great
@TheWebShala
@TheWebShala 4 года назад
Thanks
@hemantsingh5913
@hemantsingh5913 3 года назад
Very nice video 👌
@TheWebShala
@TheWebShala 3 года назад
Thanks a lot
@kaeftrinsandy985
@kaeftrinsandy985 3 года назад
Thank you my brother
@TheWebShala
@TheWebShala 3 года назад
You are welcome
@zackmcintosh-west2211
@zackmcintosh-west2211 6 месяцев назад
Thanks so much for your tutorial and source code! Really like what you have done - tidy, minimal and elegant. Could you please explain how to change the time that each slide is displayed?
@sandeshbhujang5397
@sandeshbhujang5397 3 года назад
Good one
@TheWebShala
@TheWebShala 3 года назад
thank you
@ProOnlineLaravel
@ProOnlineLaravel 2 года назад
You are a very smart programmer
@TheWebShala
@TheWebShala 2 года назад
thanks.
@tdakmolentertain1307
@tdakmolentertain1307 3 года назад
thanks
@AA-gt8rc
@AA-gt8rc 3 года назад
Nice sir
@TheWebShala
@TheWebShala 3 года назад
Thank you
@mackynikat8833
@mackynikat8833 3 года назад
thanks...
@mackynikat8833
@mackynikat8833 3 года назад
but sir can you use time interval with that like every 3s it will automatically scrolled in the next index? pls reply asap. needed tips for advance
@rafar9937
@rafar9937 3 года назад
very simple nice slider, how i can add fade effect to this? just to do something with opacity?
@RAVIABHISHEKme
@RAVIABHISHEKme 4 года назад
how to use it for blogger post?
@zainulkhan8381
@zainulkhan8381 3 года назад
sir can u explain me what does next("next") next("prev")means
@foxtv7021
@foxtv7021 11 месяцев назад
Hi Please asked how to make smooth transition to another picture I keep picturesn in array[ ] And move it by increasing index by1 But i disnt now what to add for have smooth transition to another picture in the next and back buttons
@sujeetlohar2673
@sujeetlohar2673 Год назад
how to disable prev/next arrow on first/last slider???
@specialstreetfood5324
@specialstreetfood5324 3 года назад
what is in this called function and the direction variable? direction=="next".... how the condition check?
@gouravahuja3652
@gouravahuja3652 4 года назад
When i click on next button , it shows "next" in console and when i click on prev button , it shows "prev" It must have been from next ("next")
@TheWebShala
@TheWebShala 4 года назад
check code link in description
@domaisan1702
@domaisan1702 4 года назад
The music is great 😅
@TheWebShala
@TheWebShala 4 года назад
thanks
@karamveersachdeva935
@karamveersachdeva935 3 года назад
We can use translate in animation and make it look like a slider
@TheWebShala
@TheWebShala 3 года назад
Yes
@jefrisaragih390
@jefrisaragih390 3 года назад
can you help me? I am confused about making a slide show that can be clicked and brings up a lightbox
@TheWebShala
@TheWebShala 3 года назад
lightbox slideshow ?
@donnyrosales307
@donnyrosales307 2 года назад
why does it says this "Uncaught TypeError: Cannot read properties of null (reading 'onclick')"
@TheWebShala
@TheWebShala 2 года назад
please check, the element you have set the event listener is exist or not in your html.
@nikunjgupta2878
@nikunjgupta2878 3 года назад
background music name??
@anirajshahi1036
@anirajshahi1036 3 года назад
I copied all your codes but error was shown in the console. Could you please help me out ? error: Uncaught ReferenceError: nextSlide is not defined
@TheWebShala
@TheWebShala 3 года назад
Send screenshot
@princedube8332
@princedube8332 4 года назад
does it respond to screen size
@TheWebShala
@TheWebShala 4 года назад
?
@federicocalo4776
@federicocalo4776 2 года назад
Thanks, but i have a little problem, it doesn't work with the right buttom
@TheWebShala
@TheWebShala 2 года назад
need help ? msg me on fb page
@raniaayad4285
@raniaayad4285 3 года назад
It's great thank you...but l need to put more than one slider in the same page but the second one is just not working ..can you help me please??
@TheWebShala
@TheWebShala 3 года назад
i will make this tutorial in future
@raniaayad4285
@raniaayad4285 3 года назад
@@TheWebShala thank you
@argaming9548
@argaming9548 3 года назад
Hey, I am just try to make a slider but my image is not sliding when i click on left button can you guys please explain Slider2 *{ margin: 0; padding: 0; } #container{ position: absolute; width: 1000px; height: 500px; border: 1px solid red; overflow: hidden; left: 200px; top: 20px; } #container_img img{ width: 1000px; height: 500px; background-size: cover; } #Symbol img{ position: absolute; width: 50px; height: 50px; top: 250px; left: 110px; cursor: pointer; } #Symbol #Symbol2 { left: 1250px; } var scroll1 = document.querySelector("#container_img").children; var left = document.querySelector("#Symbol1"); var right = document.querySelector("#Symbol2"); let index = 0; left.addEventListener("click",function(){ leftSlide() }) right.addEventListener("click",function(){ rightSlide() }) function leftSlide(){ if(index == scroll1.length-1){ index = 0; } else{ index++; } changeSlide(); } function changeSlide(){ for(let i=0; i
@Ragavsir
@Ragavsir 2 года назад
Js:4 undefined please help me Length problem
@TheWebShala
@TheWebShala 2 года назад
Msg me on fb
@idirashahidaramli5680
@idirashahidaramli5680 4 года назад
i dont know why my notepad said that there is error at children in js file.. hmm i dont get it 😢
@idirashahidaramli5680
@idirashahidaramli5680 4 года назад
oh mai god hahahaha i found my error 😅😅 thank you.. your tutorial is awesome 😊
@pipi7607
@pipi7607 4 года назад
@@idirashahidaramli5680 and maybe change to Visual studio code for a better understanding of errors
@andreafilms_
@andreafilms_ 2 года назад
what can i do if the image is cropped cause it is too little?
@TheWebShala
@TheWebShala 2 года назад
Do Img width 100%
@andreafilms_
@andreafilms_ 2 года назад
@@TheWebShala where? sry if i ask because it's not working
@andreafilms_
@andreafilms_ 2 года назад
@@TheWebShala it worked thx
@ahmedkasu5207
@ahmedkasu5207 3 года назад
hi! i have used the code with about 7 pictures. it works well but the problem is it does not reset after you slide the last picture. how can i fix that?
@TheWebShala
@TheWebShala 3 года назад
any error in console ?
@ahmedkasu5207
@ahmedkasu5207 3 года назад
@@TheWebShala no any errors on the console
@elzovoz3039
@elzovoz3039 3 года назад
Me too, in console said slide[index] is undefined when I click on prevBtn.
@TheWebShala
@TheWebShala 3 года назад
Review your code, download source code From description
@elzovoz3039
@elzovoz3039 3 года назад
@@TheWebShala fix already, it's because I use meta charset = utf-8. Sorry for troubling, I'm noob in this
@arrvimal4043
@arrvimal4043 3 года назад
How do automatic slider
@TheWebShala
@TheWebShala 3 года назад
var slides=document.querySelector('.slider-items').children; var nextSlide=document.querySelector(".right-slide"); var prevSlide=document.querySelector(".left-slide"); var totalSlides=slides.length; var index=0; nextSlide.onclick=function () { next("next"); resetTimer(); } prevSlide.onclick=function () { next("prev"); resetTimer(); } function next(direction){ if(direction=="next"){ index++; if(index==totalSlides){ index=0; } } else{ if(index==0){ index=totalSlides-1; } else{ index--; } } for(i=0;i
@arrvimal4043
@arrvimal4043 3 года назад
@@TheWebShala Thanks a Lot
@dynamic_damian
@dynamic_damian 3 года назад
Thanks but mine it not working
@TheWebShala
@TheWebShala 3 года назад
Check description for code
@diegofernandez1489
@diegofernandez1489 4 года назад
Uncaught ReferenceError: i is not defined at next (effect.js:38) at HTMLDivElement.nextSlide.onclick
@diegofernandez1489
@diegofernandez1489 4 года назад
(effect.js:38) for(i=0;i
@TheWebShala
@TheWebShala 4 года назад
@@diegofernandez1489 define i, let i
@justin5314
@justin5314 3 года назад
my .children got problem can i ask why?
@TheWebShala
@TheWebShala 3 года назад
problem ?
@justin5314
@justin5314 3 года назад
@@TheWebShala the JavaScript I put .children but when I inspect it show that the children is an error
@TheWebShala
@TheWebShala 3 года назад
@@justin5314 what is error ?
@justin5314
@justin5314 3 года назад
@@TheWebShala when I press inspect and console there is a line say that 'uncaught TypeError : cannot read property 'children' of null
@TheWebShala
@TheWebShala 3 года назад
@@justin5314 send me error screen shot through fb page
@SairajMane-nf6sn
@SairajMane-nf6sn 4 года назад
Try to explain
@altafhossainsadik4962
@altafhossainsadik4962 Год назад
Source code?
@TheWebShala
@TheWebShala Год назад
Check description for source code
@altafhossainsadik4962
@altafhossainsadik4962 Год назад
@@TheWebShala Thanks a lot
@mateuszbronis3515
@mateuszbronis3515 4 года назад
JS doesn't work bro
@TheWebShala
@TheWebShala 4 года назад
what is error?
@mateuszbronis3515
@mateuszbronis3515 4 года назад
The WebShala The code I wrote is identical, but the button don’t react
@mateuszbronis3515
@mateuszbronis3515 4 года назад
@@TheWebShala Do you have a code somewhere to download?
@TheWebShala
@TheWebShala 4 года назад
drive.google.com/file/d/1qSLr9Bdapj6szcGKaxhMXLGlcFpTPGtx/view?usp=sharing
@mateuszbronis3515
@mateuszbronis3515 4 года назад
The WebShala I found the solution. When I wrote ‘onClick’ like this it was error. When I wrote ‘onclick’ everything it’s ok. Thanks you for your help 👊🏻
@nikunjgupta2878
@nikunjgupta2878 3 года назад
background music name??
@TheWebShala
@TheWebShala 3 года назад
which one ?
Далее
Direction Aware Hover Effect using by Javascript
15:23
Просмотров 2,6 тыс.
Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️
15:49
Pure CSS Image Slider  Using Only HTML & CSS
7:39
Просмотров 167 тыс.
HTML and CSS Project Tutorial: Pure CSS Image Slider
7:41
Image Carousel using HTML, CSS,  Vanilla JavaScript
11:40
Бургер меню - просто. HTML + CSS + JS
22:34
Coder un slider simple en JavaScript, HTML et CSS
31:29
This Simple Trick Makes Your Website 83% Better Looking
10:57