How to make slick slider controllable with mouse wheel?

2022-01-15 09:37 Belzer imported from Stackoverflow

I need to make it so that in the slick slider you can control the mouse wheel, an example is here My code: code on codepen

    $(document).ready(function(){
    $('.slider').slick({
        vertical: true,
        verticalSwiping: true,
        touchThreshold: true

    });
});

1 answer

answered 2022-01-15 10:54 Monika Virmani
```
**check this out**
```
check this link

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.

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

How to clear user uploaded images if the limit of files exceeded in jquery
I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:
```
$("#myfile").on("change", function() {
    if ($("#myfile")[0].files.length > 4) {
        alert("You can select only 4 images");
    } 
});
```
```
<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">
```
This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.

Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?

Some iphone device not able play audio browser jquery

My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,

 <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script>   

let autoplay = true;
    let soundID;
    var sound = new Howl({
        src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'],
        autoplay: autoplay,
        loop: true,
    });

    soundID = sound.play();

Whenever I try to add email on mysql server. My page is not responding. why?

I am a little bit confused. see the code below.

$('#submit').click(function() {
    $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/
    $.ajax({
        url: "save.php",
        /* Here data store on mysql server without email and response to welcome.php. */
        type: "POST",
        /* if i want to add proper email format then data store in mysql but not response on welcome.php. */
        data: $('#senddata').serialize(),
        success: function(r) {
            alert("ok");
            $('#senddata').trigger('reset');
            window.location = 'welcome.php'; /*This is welcome page*/
        }
    })
})

I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.

<?php
include('./config.php');
print_r($_POST);
    $name=$_POST['name'];
    $email=mysqli_real_escape_string($con,$_POST['email']);
    $pwd=$_POST['password'];
    $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip'];
    $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')";
    print_r($insertdata);
    if(mysqli_query($con,$insertdata)){
        echo "data added";
    }else{
        echo "not added";
    }

?>

Note: if I put my button <button class="btn btn-primary" id="submit">sign up</button> outside form then everting is right.

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.

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?

Slick slider not working despite no errors and correct paths to CSS/JS

I am completely puzzled here. I have seen many questions about the Slick slider but none of the solutions worked for me.

I followed steps from Github - I installed Slick via npm and am using Gulp to process my CSS/JS files, which compiles my Slick script from node_modules. I checked the source script and styles and the Slick code is definitely being compiled correctly and after jQuery.

This is my head:

<!DOCTYPE html>
  <html lang="en">
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title><?= $page['title'] ?></title>

        <?php
        include SITE_DIR . '/parts/script.php';
        include SITE_DIR . '/parts/style.php';
        ?>
     </head>

     <body>

My mini-slide.php file:

<div class="mini-slider__items">
        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

        <div class="mini-slider__item">
            <img class="tiles__image" src="/images/logos/Logo.png" alt="">
        </div>

    </div>

And my mini-slider.js:

$('.mini-slider__items').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });

What I have tried:

checked that jQuery is loaded before Slick
checked that mini-slider.js file is compiled into the main source file and in the correct order
console - no errors displayed

Any ideas will be greatly appreciated, I am getting very frustrated now :(

Slick Slider's dots are squished on iOS devices

For some reason slick slider's dots are squished

in CSS size of the slider is set by pixel amount, could it be the problem? (it has to be specific size)

in Chrome preview with iPhone device chosen on an actual iPhone in any browser, Safari and Chrome

slickslider - slide to show 4.5 showing half image on left side. I want it on right side

I'm using slick slider. I need to show half of the next image in the right side corner. So, I'm using slide to show as 4.5 But the half image is displaying in the left side corner of the slickslider. Is there any option to change it to the right side[

$('.slider-nav').slick({
      slidesToShow: 4.5,
      slidesToScroll: 3,
      dots: false,
      centerPadding: '30px',
      nextArrow: '<div class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-lg"></i></div>',
      prevArrow: '<button class="nav-arrow slick-prev slick-arrow leftarrow"><i class="icon-leftarrow-md" aria-hidden="true"></i></button>',      
      focusOnSelect: true,

Related questions

How to make slick slider controllable with mouse wheel?

1 answer

See also questions close to this topic