Slider in Apple store style

2022-05-05 18:28 DaFois imported from Stackoverflow

I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.

https://www.apple.com/store

The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
Getting error while creating an IBAction "Cannot convert value of type 'Float' to expected argument type '[CVarArg]'"
I want to connect a slider to the viewController in my app which I am writing with swift.

As soon as I create an IBAction:
```
@IBAction func heightSlider(_ sender: UISlider) {}
```
I immediately get the error message:

"Cannot convert value of type 'Float' to expected argument type '[CVarArg]'".

I have already searched for the solution in the Apple documentation but I can't get rid of the error.

Can someone please help me with this?

Many greetings

FULL CODE: import UIKit
```
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func heightSlider(_ sender: UISlider) {
    }
    
    @IBAction func weightSlider(_ sender: UISlider) {
    }
    
}
```
Screenshot: Cannot convert value of type 'Float' to expected argument type '[CVarArg]'

I am using Xcode Version 13.3 (13E113)

How to find index of previous active class

I am trying to make a slider. Most of it is working till here, but I am not getting further as I want to find the index of the item which I removed the class as last from.(before the click)

So when I click on a dot, the clicked dot must be enabled and get the active class and the class on the previous active dot needs to be removed.

navDots.addEventListener('click', e => {
         
         // make only dot's clickable
         const targetDot = e.target.closest('.dots');

        // disable NavDots for clicks
        if(!targetDot)return;
            
        //Find the index of the clicked btn
        const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot);
        console.log(dotIndex);

        // Add the active class tot the dot     
        navDots.children[dotIndex].classList.add('active');
       
        //HOW TO REMOVE PREVIOUS DOT ACTIVE style?
            
            //show image with dotIndex
            showImages(dotIndex);
});

Thank you for helping,

r,y.

carousel moving to bottom when clicking next and before buttons

Instead of using bootstrap, I use CSS to cover those. My code looks as follows:

<style>
@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

*{
    -webkit-animation-delay: 3600s;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 50%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  counter-increment: item;
  -webkit-animation: slide 3600s infinite linear;
}

.carousel__slide:nth-child(even) {
    -webkit-animation-delay: 3600s;
}

.carousel__slide:nth-child(odd) {
    -webkit-animation-delay: 3600s;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media () {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 20%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -0.5rem;
}

.carousel::after,
.carousel__next {
  right: 1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

    .outer-container{
        display: flex;
        justify-content: space-around;
        /*max-width: 960px;*/
        margin-left: 10px;
        padding-top: 10px;
    }
    
    .vertical-separator{
        border: solid 1px #D5DBDB;
    }
    
    .left-container{
        padding-right: 5px;
    }
    
    .right-container{
        padding-top:  20px;
        padding-left: 5px;
        padding-right:  5px;
    }
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
</style>

<crowd-form answer-format="flatten-objects">
    <div id="errorBox"></div>
    
    <section class="carousel" aria-label="survey" data-interval="false">
      <ol class="carousel__viewport">
        </li>  
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper">
            <div class="outer-container">
                <span class="left-container">
                    <h3>#1</h3>
                    <img src = "${h1_image_url}" width="100" height="250">
                </span>
                <span class="vertical-separator"></span>
                <span class="right-container">
                    <div>
                        <br>
                        <br>
                        <br>
                        <br>
                        <p><strong>choose one</strong></p>
                        <input type="radio" id="Happy_1" name="h1" value="Happy">
                        <label for="Happy_1">Happiness</label><br>
                        <input type="radio" id="Sad_1" name="h1" value="Sad">
                        <label for="Sad_1">Sadness</label><br>
                        <input type="radio" id="Happy_1" name="h1" value="Happy">
                        <label for="Happy_2">Happiness</label><br>
                        <input type="radio" id="Happy_2" name="h1" value="Happy">
                        <label for="Happy_3">Happiness</label><br>
                        <input type="radio" id="Happy_3" name="h1" value="Happy">
                        <label for="Happy_3">Happiness</label><br>
                        
                    </div>
                </span>
            </div>
           <a href="#carousel__slide2"
           class="carousel__prev">Go to last slide</a>
           <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
          </div>
        </li>
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
            <div class="carousel__snapper">
                <div class="outer-container">
                    <span class="left-container">
                        <h3>#2</h3>
                        <img src = "${h2_image_url}" class="center" width="100" height="250">
                    </span>
                    <span class="vertical-separator"></span>
                    <span class="right-container">
                        <div>
                        <br>
                        <br>
                        <br>
                        <br>
                            <p><strong>choose one</strong></p>
                            <input type="radio" id="Happy_4" name="h2" value="Happy">
                            <label for="Happy_4">Happiness</label><br>
                            <input type="radio" id="Sad_2" name="h2" value="Sad">
                            <label for="Sad_2">Sadness</label><br>
                            <input type="radio" id="Sad_3" name="h2" value="Sad">
                            <label for="Sad_3">Sadness</label><br>
                            <input type="radio" id="Sad_4" name="h2" value="Sad">
                            <label for="Sad_4">Sadness</label><br>
                            <input type="radio" id="Sad_5" name="h2" value="Sad">
                            <label for="Sad_5">Sadness</label><br>
                            
                        </div>
                    </span>
                </div>
              <a href="#carousel__slide1"
               class="carousel__prev">Go to previous slide</a>
              <a href="#carousel__slide1"
               class="carousel__next">Go to next slide</a>
            </div> 
            </li>
      </ol>
      <aside class="carousel__navigation">
        <ol class="carousel__navigation-list">
          <li class="carousel__navigation-item">
            <a href="/#carousel__slide1"
               class="carousel__navigation-button">Go to slide 1</a>
          </li>
          <li class="carousel__navigation-item">
            <a href="/#carousel__slide2"
               class="carousel__navigation-button">Go to slide 2</a>
          </li>
        </ol>
      </aside>
    </section>
</crowd-form>

When I press the next and previous buttons, the page moves itself to the bottom of the browser. I want to fix the browser if the user does not scroll the window.

I tired to add href="/#carouselExample" but it does not work. Is there any other way I can fix it?

Show relevant text when looping through images

I'm trying to loop through the image carousel and show the text related to the portrait image when there is a portrait image being displayed and the same for the landscape image, but only display the relative text and not both sets of text at the same time. Any help would be greatly appreciated.

const img = document.querySelector(".slide");
const portraitText = document.querySelector(".portrait-text");
const landscapeText = document.querySelector(".landscape-text");
const next = document.querySelector(".next");
const prev = document.querySelector(".prev");


next.addEventListener("click", () => {
  if (img.hasAttribute('[data-orientation="portrait"]')) {
    landscapeText.style.display = "none";
    portraitText.style.display = "block";
  } else {
    portraitText.style.display = "none";
    landscapeText.style.display = "block";
  }
});

<ul data-slides>
  <li class="slide" data-orientation="landscape" data-active>
    <img src="" alt="" />
  </li>
  <li class="slide" data-orientation="landscape">
    <img src="" alt="" />
  </li>
  <li class="slide" data-orientation="landscape">
    <img src="" alt="" />
  </li>
  <li class="slide" data-orientation="portrait">
    <img src="" alt="" />
  </li>
  <li class="slide" data-orientation="landscape">
    <img src="" alt="" />
  </li>
</ul>
<div class="gallery-content">
  <div class="gallery-text">
    <h1>Title</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
  </div>
  <div class="sizing">
    <h2>Size</h2>
    <button class="sizes">M</button>
    <button class="sizes">L</button>
    <button class="sizes">XL</button>
  </div>
  <div class="dimensions-container landscape-text">
    <h2 class="dimensions-title">Landscape</h2>
    <h2 class="dimensions">100 x 66.6cm (39.3"x 26.2") - Edition of 25</h2>
    <h2 class="dimensions">110 x 165cm (43.3"x 64.9") - Edition of 12</h2>
    <h2 class="dimensions">200 x 133.3cm (78.7"x 52.4") - Edition of 8</h2>
  </div>
  <div class="dimensions-container portrait-text">
    <h2 class="dimensions-title">Portrait</h2>
    <h2 class="dimensions">100 x 63.5cm (39.3"x 25") - Edition of 25</h2>
    <h2 class="dimensions">173 x 110cm (68,1"x 43.3") - Edition of 12</h2>
    <h2 class="dimensions">209.8 x133.3cm (82.6"x 52.4") - Edition of 8</h2>
  </div>
  <a href="" target="_blank" rel="nooppener noreferrer"
    ><button class="inquire uppercase">Inquire</button></a
  >
</div>

Related questions

Slider in Apple store style

See also questions close to this topic