Related questions

Vertical carousel on scroll react

2022-05-04 11:04 Doug Mcqauy imported from Stackoverflow

I want to have a section of the website which is fixed while to slide the carousel on scroll (vertically). Once you are at the last slide the scroll will let you continue on the page instead of changing the slide of the carousel. No idea on how to do this

row with a different background color which remain fixed while the user slides through the carousel slides by scrolling the page. once we arrive on the last slide the scroll will do the usual function on the page

example https://www.petitmoulinstudio.com/#comp-kmkqr752

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum

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.

    Example

  • Creating Sticky Navbar with Drop Down Menu HTML

    I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

    *image with dropdown menu but without sticky navbar

    *image with sticky navbar but without dropdown menu

    below is the code for "image with dropdown menu but without sticky navbar"

        <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

    below is the code for "image with sticky navbar but without dropdown menu"

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

    Please i need some help with this as i am new to html and css.

  • Javascript: Change element class if button has a certain value 
    
        <div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>

    I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

    What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

    Thank you.

  • Boostrap vertical sizing with different style width and height

    I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

    Anyway is there any way how to resize bootstrap icons except display-1???

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

  • react-router-dom v6 params only numbers

    I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

     <Route path="list/:id(\d+)" element={<MyComponent/>} />

    but it not work in v6.

  • How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

    My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

    This my .env file

    REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

    This my firebase config file

    const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

    client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

  • 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.

  • Slider in Apple store style

    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.

    enter image description here 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?

  • 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>