Original subtitles

1 1

(Instructor) Let's now build 2

2

the really cool slider component. 3

3

And this is going to be a lot of work. 4

4

So we're doing that in two parts. 5

5

And so here goes Part 1. 6

6

So this is what the final version of the slider looks like. 7

7

So we can click these buttons here 8

8

to move between the slides, 9

9

and you see that also the dot down here then changes. 10

10

And as we read the last slide, 11

11

as indicated by this last thought. 12

12

If we then go to the next one, 13

13

it will basically go back to the first one like this. 14

14

And of course, we can also click on the dots like this. 15

15

So let's not understand how this is actually implemented 16

16

in terms of HTML and CSS because as always, 17

17

that's a very important aspect to make this all work. 18

18

So this is the slider component. 19

19

And then each slider has a couple of slides. 20

20

So three slides and they are in fact, all side by side. 21

21

So we have slide one, make the smaller here, 22

22

because the content doesn't really matter. 23

23

So you have these three slides. 24

24

And so you see here by this blue area 25

25

that they're all side by side. 26

26

So here in the slider, 27

27

we can turn off this overflow property 28

28

which is set to hidden and then you can actually see 29

29

the next slide already waiting there, basically. 30

30

So what happens when we click this button 31

31

is that all the slides move a little bit to the left side. 32

32

So watch until you see that now the first slide is here, 33

33

the second is in the middle and a third is right here. 34

34

And that happens by using this transform CSS property, 35

35

which we then set to translate x. 36

36

And then here, we define these values to basically 37

37

move each of the slides as we click these buttons. 38

38

So watch what happens here in these values as I click. 39

39

And so now the last slide here is basically at zero percent. 40

40

The one before is that minus 100. 41

41

And the one before is at minus 200. 42

42

So minus is basically to the left, 43

43

and the width of each slide is 100. 44

44

And so basically, this is all we need to do 45

45

in order to make this slide work. 46

46

So basically adapt these percentages here as we go. 47

47

So you see that now the first slide is zero percent, 48

48

then the other one that 100 and a third one, 49

49

which is all the way to the right side, is now at 200%. 50

50

So this is basically the starting position of the slider. 51

51

And let's compare that to what we have currently 52

52

in our slider. 53

53

So we have all of the slides 54

54

basically on top of each other right now. 55

55

And so the first thing that we should do here 56

56

is to basically establish this initial condition 57

57

where they are all side by side. 58

58

So like this. 59

59

And so what we're going to do on each of them 60

60

is to set this transform property to these percentages. 61

61

But of course, all automatically. 62

62

So let's start here with our slider. 63

63

And as always, I'm going to start with some selections. 64

64

So starting with the slider, 65

65

or actually with the slides themselves, 66

66

so that we can then manipulate them. 67

67

So document.querySelectorAll. 68

68

And so that's a slide. 69

69

So with the class of slide and we can also of course, 70

70

see that here in our own HTML. 71

71

So you see, here we have the slide. 72

72

Now the content that is inside of each of these slides, 73

73

is completely irrelevant for our purposes. 74

74

So all we are concerned with is the slider element, 75

75

and then this slide. 76

76

So this one and all the others. 77

77

So I can collapse these just to see. 78

78

And so yeah, we are only going to be concerned 79

79

with the slides and then you can maybe 80

80

use this for your own projects in the future. 81

81

And put whatever you want inside these slides. 82

82

For example, you could just have images, 83

83

or really anything that you want. 84

84

And in fact, that's what I have down here. 85

85

So here I only have some images, 86

86

and maybe we should actually work with that. 87

87

So let's actually try that. 88

88

So I will comment out this part. 89

89

So not really sure how that works anymore. 90

90

And so now let's make this actually visible. 91

91

Just to see. 92

92

So these are our slides now. 93

93

But once again, they're all on top of each other. 94

94

And we can see that here when we inspect them. 95

95

So indeed, all these slides are in the same position. 96

96

And so let's create that starting condition 97

97

that I mentioned a minute ago. 98

98

So putting all the slides side by side. 99

99

So let's take the slides. 100

100

And we're going to loop through them 101

101

and set the style on each of them. 102

102

So let's create a simple arrow function here. 103

103

And the parameters, I will just call S for slide. 104

104

And then we also need the second one, which is the index. 105

105

And you will see in a minute why that is. 106

106

And so here, we want to set the style on each of the sides. 107

107

And remember, it is the transform property 108

108

that we want to set. 109

109

So transform, and then we want to set it to translate x. 110

110

And then here is where we have to specify the value. 111

111

And that value is going to be in percentages. 112

112

And let me just write down here what we want. 113

113

So the first slide should be at zero percent, 114

114

the second should be at 100%, then 200%, and then 300%. 115

115

And so that's because translate x 116

116

will basically move them to position 100%. 117

117

So the width of each of these images is 100%. 118

118

And so then the second image 119

119

will start right here at the end of the first one. 120

120

Then the third one will start right after the first one, 121

121

which is at position 200% and then 300. 122

122

So how can we calculate these values here? 123

123

Well, we can simply multiply 100%. 124

124

So here, we need now a JavaScript value. 125

125

So we can multiply 100% by the current index. 126

126

So in the beginning, that's going to be zero. 127

127

So zero times 100, is zero. 128

128

And then, as you see, it will go all the way until 300. 129

129

Because in this case, we have four images or four slides. 130

130

But if we were working with the other slides, 131

131

then that would only go to 200%, 132

132

because we only have three slides. 133

133

So that should already be enough. 134

134

And now we have this problem, 135

135

that our sections here keep disappearing 136

136

and that's because the code we wrote earlier. 137

137

So reveal sections. 138

138

And so for now, let's remove this observer. 139

139

While the observer can actually stay, 140

140

what we need to remove is these hidden classes. 141

141

So now that works. 142

142

And so let's check out the images now. 143

143

And we can really see them. 144

144

But indeed, they have now zero percent, 100, 200, 300, 145

145

and so on and so forth. 146

146

Let's maybe temporarily scale down the entire slider. 147

147

So let's come here to or let's do 148

148

that actually here in JavaScript. 149

149

So just to make this a little bit easier for us to see. 150

150

So const slider is document.querySelector, slider. 151

151

And then what I want to do 152

152

is slider.style.transform, and set it to scale. 153

153

Let's say 0.5. 154

154

Yeah, so that looks a bit better. 155

155

Now, we just need to change that overflow 156

156

that I just showed you before. 157

157

So that overflow here, we need to set to visible. 158

158

So also on the slider. 159

159

So otherwise, we cannot see the other slides. 160

160

So let's do that as well. 161

161

So overflow, and we need to set it 162

162

to hidden or actually to visible. 163

163

Let's make this even smaller actually. 164

164

Even smaller, just so we can see all the images. 165

165

So you see now all the four of them are here. 166

166

And our buttons are not really small. 167

167

So they are still here. 168

168

But I think we will be able to work with this. 169

169

Maybe we can just move the whole thing 170

170

a little bit to the left. 171

171

So let's say translate x here as well. 172

172

And keep in mind that this has nothing 173

173

to do with the functionality. 174

174

Okay, this is just so we can see what we are doing here. 175

175

So this works. 176

176

Now we can move it even further. 177

177

And so now we can make it a bit bigger again. 178

178

So that's beautiful, that works for now. 179

179

And then by the end, we will simply remove all of this. 180

180

But now let's actually get to work 181

181

and make this slider work. 182

182

And so I will start by selecting these two buttons. 183

183

So that's the button left, query selector. 184

184

Let's see here. 185

185

So that's slider button left and button right. 186

186

And then simply duplicate it. 187

187

So button right.addEventListener. 188

188

And let's start by only working now 189

189

to make the slide go right, 190

190

so clicking just on this button here. 191

191

And I think we're not even going to need the event for now. 192

192

Okay, so this is basically to go to the next slide. 193

193

So remember that going to the next slide 194

194

is basically simply changing 195

195

the value here in the transform property. 196

196

So this translate x, 197

197

all we will do is to change the percentages. 198

198

So that basically the slide 199

199

that we want to move to is the one that has zero percent. 200

200

So remember that this is what we did here. 201

201

So right now the active one 202

202

is the one that has zero percent, 203

203

and the previous one has minus 100 and the other 100. 204

204

So again, that is the whole mechanism 205

205

that we're using here to move the slides. 206

206

And so this is what we will do now. 207

207

So in the beginning, we are at slide zero, 208

208

but then when we want to go to the next slide, 209

209

we need to increase that. 210

210

So let's outside here, create a new variable 211

211

for the current slide. 212

212

So let current slide and it is a let 213

213

because we will of course, then update it. 214

214

So we start at zero and then when we go to the next slide, 215

215

we simply increase that by one. 216

216

All right, and so right now, it is one. 217

217

And then what we need to do 218

218

is to basically do the same as this, 219

219

but with a small change. 220

220

So let's say that the current slide is one, 221

221

then we do not want this here. 222

222

We don't want this, but instead 223

223

we want the first slide to be minus 100. 224

224

This one zero, this one 100, and the other one 200. 225

225

So how do we do that? 226

226

Well, we take the current index, 227

227

and then we subtract the current slide. 228

228

So again, we will take this, 229

229

so each slide that we're looping over, 230

230

and then minus the current slide. 231

231

So like this, and then this will give us 232

232

exactly what we want. 233

233

So again, let's say that the current slide is one. 234

234

Let's write that here, actually. 235

235

And so then as we loop over these slides, 236

236

in the first iteration this will be zero, 237

237

and then zero minus one will be minus one. 238

238

And then times 100 is of course, minus 100. 239

239

Then the next slide, the index is one, 240

240

and then one minus one is zero. 241

241

And so that will then become zero percent. 242

242

And so remember that the active slide 243

243

is exactly the one that we want to be zero percent. 244

244

And so this should now actually work. 245

245

Let's see and yeah, it is already moving. 246

246

So the first part is already doing its job. 247

247

But now we are kind of at the last slide here. 248

248

So let's see what happens next. 249

249

So it actually keeps going. 250

250

So the number of slides keeps increasing. 251

251

And so of course, these values here also keep increasing. 252

252

Because, well, JavaScript doesn't know 253

253

that we are working a slider 254

254

and so of course it doesn't stop. 255

255

We need to tell it to stop. 256

256

So how can we do that? 257

257

Well, the best way is to actually define 258

258

the number of slides and then make it stop 259

259

once we reach the last one. 260

260

So let's say that the next slide. 261

261

So the maximum slide where we can go is slides.length. 262

262

So basically the length of this node list here, 263

263

and our node list, we can also read the length property, 264

264

just like on an array. 265

265

So here when we define the value of the current slide, 266

266

we now need to update this a little bit. 267

267

And so if we are at the next slide, 268

268

so if the current slide is equal the next slide, 269

269

then we want the current slide to become zero again. 270

270

And so that's how we return to the beginning of the slides. 271

271

And otherwise, we will simply increase the slides by one. 272

272

Okay, so let's test that here. 273

273

So everything keeps working. 274

274

Now we are at slide number three. 275

275

And so we are at the end. 276

276

But actually, this next slide is four. 277

277

So the length is four, but the index is three. 278

278

And so as always, that's because 279

279

the length is not zero based. 280

280

So probably it will keep going one more time, 281

281

and then it will return to the beginning. 282

282

Yeah, beautiful. 283

283

All we need to change here is to add minus one to this, 284

284

to basically also make this zero based. 285

285

And so now, let's see. 286

286

Well, our slider is basically already working. 287

287

So at least in this direction, so this button of course not. 288

288

But here, we can see that it's doing its job already. 289

289

So that's really nice. 290

290

Let's now just quickly refactor this code a little bit. 291

291

So we have here, basically the exact same code, 292

292

or at least almost the same code as here. 293

293

But we can refactor this into its own function. 294

294

So let's grab this here. 295

295

And I will create a function now called goToSlide. 296

296

So that's a function where we pass in the slide. 297

297

So basically, the number of the slide 298

298

where we want to go to and then here, 299

299

we change the current slide 300

300

to the slide that we are indicating. 301

301

And here, I can then call this goToSlide 302

302

with the current slide. 303

303

So far, we didn't change anything. 304

304

Just delete this comment here. 305

305

And now to be able to remove this part here, 306

306

all we need to do is to basically call this function here, 307

307

right in the beginning of our code 308

308

with the slide set to zero. 309

309

So this slight argument set to zero. 310

310

And so what this will do is then basically, 311

311

once our application starts, 312

312

it immediately goes to slide zero. 313

313

And so that will then execute basically this code. 314

314

So slide will be zero. 315

315

And so i minus zero is then of course just i 316

316

and so that's 10, exactly what we have here. 317

317

So go to slide zero. 318

318

And so now I can delete this. 319

319

And that's great. 320

320

Then to make this just a bit more beautiful, 321

321

let's actually also take this one here, 322

322

and create a new function for that. 323

323

So const nextSlide and put it here. 324

324

And this one doesn't need any parameters. 325

325

Because the goal of this is really just to export 326

326

the functionality into its own named function. 327

327

And so indeed, it keeps working just as before. 328

328

Next up, let's then work on this button here. 329

329

And so all I need to do is to add an event listener 330

330

to button left. 331

331

Also click and then I'm going to create 332

332

a function called previous slide, or just prev slide. 333

333

So let me create that here very quick as well. 334

334

So const, brief slide. 335

335

And so in this case, the current slide will be decreased. 336

336

And then here, I can simply reuse the same function 337

337

that I already wrote before, 338

338

and also with the current slide. 339

339

So the functionality of moving to a slide 340

340

is of course exactly the same 341

341

no matter if we go forward or upward. 342

342

So all this will do is to update 343

343

the transform property on all of the slides. 344

344

And that works in always the same way 345

345

no matter if we're going forwards or backwards. 346

346

So the main difference between the next 347

347

and the previous slide is really the way 348

348

in which we determined the current slide. 349

349

So when we go to the next slide, 350

350

we basically increase the current slide. 351

351

And when we go backwards, so to the previous slide, 352

352

we simply decrease it. 353

353

So let's try that now. 354

354

And first we need to go forward, 355

355

because our functionary is not really complete. 356

356

But in this situation, it already works just fine. 357

357

But then as we keep going, 358

358

we have the same problem as before, 359

359

because we simply keep decreasing the current slide. 360

360

And so we now need to fix that. 361

361

So in which situation does simply decreasing 362

362

the current slide not work? 363

363

So it works right now. 364

364

So now it works. 365

365

But now it does not work. 366

366

And so that is in the situation 367

367

where the current slide is already zero. 368

368

So that's right. 369

369

If the current slide is zero. 370

370

So in this case, the current slide 371

371

should be equal to the next slide. 372

372

And again, that's minus one, 373

373

because that next slide is not zero based. 374

374

And then else and so now, 375

375

that should actually work. 376

376

And indeed beautiful. 377

377

And so now, our slider is actually working already. 378

378

We are just missing a couple of features. 379

379

So namely, these dots here, 380

380

which is a little bit complicated to implement. 381

381

And also in this version, 382

382

we can use the arrow left and arrow right functions 383

383

to move through the slider. 384

384

So now I'm just hitting the left button, 385

385

and the right button. 386

386

But I'm going to leave that for the next video. 387

387

For now, let's just get rid of these things 388

388

that we did in the beginning, 389

389

so that we can see the actual slider 390

390

in all its beauty (laughs). 391

391

So now, it does indeed look like a real slider, 392

392

doesn't it? 393

393

So I'm really happy with this result. 394

394

And I hope that you're as well. 395

395

And of course, I wouldn't expect you 396

396

to be able to write this code on your own just yet. 397

397

So when we implement something like this, 398

398

there is a lot of stuff to think about, 399

399

especially in this case, 400

400

the most tricky part is in my opinion this here. 401

401

And this probably comes from experience. 402

402

And so at a certain point, if you practice enough, 403

403

you will also be able to come up with a logic like this. 404

404

So I just invite you to study this code 405

405

here a little bit before we move on. 406

406

And once you're done doing that, 407

407

then let's move on and implement these dots 408

408

at the bottom of the slider that I just showed you.