Cant migrate JS from HTML

  • zond28

    (@zond28)


    5 years, 2 months ago

    Hi
    In HTML JS was:

    <script src="carousel.js"></script>
<script>
  const myCarousel = new Carousel({
  container: document.querySelector('.slider'),
  items: document.querySelectorAll('.slider__item'),
  displayControls: false,
  controlsContainer: document.querySelector('.slider__controls'),
  autoplay: true,
  autoplayTime: 3500
}); 
</script>

    I added to a functions.php:

    
<?php
function wpb_adding_scripts() {
wp_register_script('carousel', get_template_directory_uri() . '/carousel.js','','1.1', $in_footer = true);
wp_enqueue_script('carousel');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

    Rest of the JS I tried to add to a Header and a Footer:

    
<script>
  const myCarousel = new Carousel({
  container: document.querySelector('.slider'),
  items: document.querySelectorAll('.slider__item'),
  displayControls: false,
  controlsContainer: document.querySelector('.slider__controls'),
  autoplay: true,
  autoplayTime: 3500
}); 
</script>

    By using *Insert Headers and Footers, JS Simple Custom CSS and JS and even manualy but nothing works.

    JS on HTML web working good: https://truegenealogist.com/wp-content/themes/theme/index.html
    Bud with WP: https://truegenealogist.com/

    Any suggestions?
    Thanks

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Joy

    (@joyously)

    5 years, 2 months ago

    You can use
    https://developer.wordpress.org/reference/functions/wp_add_inline_script/

    Thread Starter zond28

    (@zond28)

    5 years, 2 months ago

    For the first script or the last one?
    Not sure how to use it…

    Joy

    (@joyously)

    5 years, 2 months ago

    It’s “adding”, so it’s for the second script. Look at the examples at the bottom.

    Thread Starter zond28

    (@zond28)

    5 years, 2 months ago

    So in the footer.php I can add this, right?:

    wp_add_inline_script( new_carousel.js $handle,
    <script>
    const myCarousel = new Carousel({
    container: document.querySelector(‘.slider’),
    items: document.querySelectorAll(‘.slider__item’),
    displayControls: false,
    controlsContainer: document.querySelector(‘.slider__controls’),
    autoplay: true,
    autoplayTime: 3500
    });
    </script>

    $data, footer $position = ‘after’ )

    Joy

    (@joyously)

    5 years, 2 months ago

    No, not at all.
    Please read the linked page, at the bottom, which shows examples. You should put a call to the function right after the call to wp_enqueue_script.

    Thread Starter zond28

    (@zond28)

    5 years, 2 months ago

    I dont understand the examples. they pur src there, while I have a script

    Joy

    (@joyously)

    5 years, 2 months ago

    I don’t see that.
    How about 

    <?php
function wpb_adding_scripts() {
  wp_enqueue_script('carousel', get_template_directory_uri() . '/carousel.js', '', '1.1', true);
  wp_add_inline_script( 'carousel', "const myCarousel = new Carousel({
  container: document.querySelector('.slider'),
  items: document.querySelectorAll('.slider__item'),
  displayControls: false,
  controlsContainer: document.querySelector('.slider__controls'),
  autoplay: true,
  autoplayTime: 3500 });" );
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
    Thread Starter zond28

    (@zond28)

    5 years, 2 months ago

    thanks, but it’s not working
    I think Im too dump for this CMS

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Cant migrate JS from HTML’ is closed to new replies.