├── app.js
├── index.html
└── style.css


/app.js:
--------------------------------------------------------------------------------
  1 | const imagesArea = document.querySelector('.images');
  2 | const gallery = document.querySelector('.gallery');
  3 | const galleryHeader = document.querySelector('.gallery-header');
  4 | const searchBtn = document.getElementById('search-btn');
  5 | const sliderBtn = document.getElementById('create-slider');
  6 | const sliderContainer = document.getElementById('sliders');
  7 | // selected image 
  8 | let sliders = [];
  9 | 
 10 | 
 11 | // If this key doesn't work
 12 | // Find the name in the url and go to their website
 13 | // to create your own api key
 14 | const KEY = '15674931-a9d714b6e9d654524df198e00&q';
 15 | 
 16 | // show images 
 17 | const showImages = (images) => {
 18 |   imagesArea.style.display = 'block';
 19 |   gallery.innerHTML = '';
 20 |   // show gallery title
 21 |   galleryHeader.style.display = 'flex';
 22 |   images.forEach(image => {
 23 |     let div = document.createElement('div');
 24 |     div.className = 'col-lg-3 col-md-4 col-xs-6 img-item mb-2';
 25 |     div.innerHTML = ` <img class="img-fluid img-thumbnail" onclick=selectItem(event,"${image.webformatURL}") src="${image.webformatURL}" alt="${image.tags}">`;
 26 |     gallery.appendChild(div)
 27 |   })
 28 | 
 29 | }
 30 | 
 31 | const getImages = (query) => {
 32 |   fetch(`https://pixabay.com/api/?key=${KEY}=${query}&image_type=photo&pretty=true`)
 33 |     .then(response => response.json())
 34 |     .then(data => showImages(data.hitS))
 35 |     .catch(err => console.log(err))
 36 | }
 37 | 
 38 | let slideIndex = 0;
 39 | const selectItem = (event, img) => {
 40 |   let element = event.target;
 41 |   element.classList.add('added');
 42 |  
 43 |   let item = sliders.indexOf(img);
 44 |   if (item === -1) {
 45 |     sliders.push(img);
 46 |   } else {
 47 |     alert('Hey, Already added !')
 48 |   }
 49 | }
 50 | var timer
 51 | const createSlider = () => {
 52 |   // check slider image length
 53 |   if (sliders.length < 2) {
 54 |     alert('Select at least 2 image.')
 55 |     return;
 56 |   }
 57 |   // crate slider previous next area
 58 |   sliderContainer.innerHTML = '';
 59 |   const prevNext = document.createElement('div');
 60 |   prevNext.className = "prev-next d-flex w-100 justify-content-between align-items-center";
 61 |   prevNext.innerHTML = ` 
 62 |   <span class="prev" onclick="changeItem(-1)"><i class="fas fa-chevron-left"></i></span>
 63 |   <span class="next" onclick="changeItem(1)"><i class="fas fa-chevron-right"></i></span>
 64 |   `;
 65 | 
 66 |   sliderContainer.appendChild(prevNext)
 67 |   document.querySelector('.main').style.display = 'block';
 68 |   // hide image aria
 69 |   imagesArea.style.display = 'none';
 70 |   const duration = document.getElementById('duration').value || 1000;
 71 |   sliders.forEach(slide => {
 72 |     let item = document.createElement('div')
 73 |     item.className = "slider-item";
 74 |     item.innerHTML = `<img class="w-100"
 75 |     src="${slide}"
 76 |     alt="">`;
 77 |     sliderContainer.appendChild(item)
 78 |   })
 79 |   changeSlide(0)
 80 |   timer = setInterval(function () {
 81 |     slideIndex++;
 82 |     changeSlide(slideIndex);
 83 |   }, duration);
 84 | }
 85 | 
 86 | // change slider index 
 87 | const changeItem = index => {
 88 |   changeSlide(slideIndex += index);
 89 | }
 90 | 
 91 | // change slide item
 92 | const changeSlide = (index) => {
 93 | 
 94 |   const items = document.querySelectorAll('.slider-item');
 95 |   if (index < 0) {
 96 |     slideIndex = items.length - 1
 97 |     index = slideIndex;
 98 |   };
 99 | 
100 |   if (index >= items.length) {
101 |     index = 0;
102 |     slideIndex = 0;
103 |   }
104 | 
105 |   items.forEach(item => {
106 |     item.style.display = "none"
107 |   })
108 | 
109 |   items[index].style.display = "block"
110 | }
111 | 
112 | searchBtn.addEventListener('click', function () {
113 |   document.querySelector('.main').style.display = 'none';
114 |   clearInterval(timer);
115 |   const search = document.getElementById('search');
116 |   getImages(search.value)
117 |   sliders.length = 0;
118 | })
119 | 
120 | sliderBtn.addEventListener('click', function () {
121 |   createSlider()
122 | })
123 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <title>Title</title>
 6 |   <!-- Required meta tags -->
 7 |   <meta charset="utf-8">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 9 | 
10 |   <!-- Bootstrap CSS -->
11 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
12 |     integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
13 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
14 |     integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
15 |   <link rel="stylesheet" href="style.css">
16 | </head>
17 | 
18 | <body>
19 |   <div class="container">
20 |     <h4 class="mt-2 text-center">Search Image for create slider</h4>
21 |     <div class="form-inline mt-3 d-flex justify-content-center">
22 |       <div class="input-group col-md-6 mb-2">
23 |         <input type="text" class="form-control" id="search" placeholder="nature">
24 |       </div>
25 |       <button type="button" id="search-btn" class="btn btn-primary mb-2">Search</button>
26 |     </div>
27 |     <section class="images">
28 |       <div class="justify-content-around align-items-center mt-3 gallery-header mb-2">
29 |         <h3 class="head-title text-center">Select image for create slider</h3>
30 |         <div class="input-group col-md-3 mb-2 mb-md-0">
31 |           <input class="form-control" id="doration" placeholder="slider change duration">
32 |         </div>
33 |         <button id="create-slider" class="btn btn-primary px-5">Create slider</button>
34 |       </div>
35 |       <div class="row gallery">
36 | 
37 |       </div>
38 |     </section>
39 |     <!-- slider -->
40 |     <div class="main">
41 |       <section class="mt-5" id="sliders">
42 | 
43 |       </section>
44 |       <div class="dots d-flex mt-2 w-100 justify-content-center align-items-center bg-light">
45 |         <span class="dot" onclick="changeItem(-1)"></span>
46 |         <span class="dot" onclick="changeItem(1)"></span>
47 |       </div>
48 |     </div>
49 |   </div>
50 |   <!-- Optional JavaScript -->
51 |   <script src="./app.js"></script>
52 | </body>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | #sliders {
 2 |   height: 400px;
 3 |   width: 60%;
 4 |   overflow: hidden;
 5 |   margin: 0 auto;
 6 |   position: relative;
 7 | }
 8 | 
 9 | .gallery-header {
10 |   display: none;
11 | }
12 | 
13 | .slider-item {
14 |   display: none;
15 | }
16 | 
17 | .img-thumbnail {
18 |   cursor: pointer;
19 | }
20 | 
21 | .added {
22 |   border: 2px solid #1e1743;
23 |   border-radius: 5px;
24 | }
25 | 
26 | img {
27 |   height: 400px;
28 |   object-fit: cover;
29 | }
30 | 
31 | .prev-next {
32 |   position: absolute;
33 |   top: 50%;
34 |   left: 50%;
35 |   transform: translateX(-50%) translateY(-50%);
36 |   cursor: pointer;
37 | }
38 | 
39 | .prev, .next {
40 |   background-color: transparent;
41 |   padding: 8px 10px;
42 |   color: #fff;
43 | }
44 | 
45 | .dot {
46 |   background-color: rgb(163, 156, 156);
47 |   height: 10px;
48 |   width: 10px;
49 |   border-radius: 50%;
50 |   cursor: pointer;
51 |   margin: 0 3px;
52 | }
53 | 
54 | .main {
55 |   display: none;
56 | }
57 | 
58 | @media (max-width: 767px) {
59 |   .justify-content-around.align-items-center.mt-3.gallery-header.mb-2 {
60 |     flex-direction: column;
61 |   }
62 |   #sliders {
63 |     height: 300px;
64 |     width: 90%;
65 |   }
66 | }


--------------------------------------------------------------------------------