#I'm trying to import owl carousel in preview.js

34 messages · Page 1 of 1 (latest)

stoic rover
cobalt steeple
#

If your code is available in a CDN / prepackaged script, you can make a preview-head.html and put the <script> tags in there

#

Otherwise, if it's available as an ES Module that you need to call before mounting your stories, you can create a global decorator, see https://storybook.js.org/docs/react/writing-stories/decorators

Decorators

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

stoic rover
stoic rover
#

I have created preview-head.html and also reference of the the jQuery file and etc files also to . Plz see pic . Kindly Guide me.

rn_image_picker_lib_temp_1d99b5b5-1271-4938-aae5-7f20d0a87e16.jpg
stoic rover
#

Hi can u see above attachment pic

#

And help me

#

I have created preview-head.html

#

Bu still not jQuery is not available

stoic rover
#

Hi

#

Kindly guide me

#

I have added in preview . html, jQuery , owl-carousel CDN etc. But still not getting js file

rn_image_picker_lib_temp_fbc07622-03b0-448a-a015-6b8e46f8533a.jpg
cobalt steeple
#

I can't help you further, just wanted to let you know about the preview-head option. You should see the script tags in your stories head now, if you inspect the story iframe in your devtools.

I don't know these libraries, so I can't debug them, especially not with just a screenshot and no info on your project setup. It's likely there's an issue with your setup, a typo in your script names, or you didn't import the right scripts or in the right order. Without a reproduction repository, people will struggle to help you further.

stoic rover
#

See this is the script I have added

I'm using storybook t I'm using jQuery for js feature and owl carousel for slider to run.
I had added preview.head.html in that code following -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-appear/0.1/jquery.appear.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<script src="
https://cdn.jsdelivr.net/npm/swiper-animation@2.0.2/build/swiper-animation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.1.0/jquery.countTo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://res.cloudinary.com/dvsqbq7xq/raw/upload/v1688449772/custom_ha0lzb.js"></script>

But this jQuery or cdn not getting to carousel.
Slider not working.

I'm attaching my folde pic also. In this picture slider is not working. So I want to rund this slider using that cdn link.

hexed comet
#

@stoic rover it's almost impossible to debug from screenshots. Can you please share a reproduction.

cobalt steeple
stoic rover
#

Hi
I have created reproduction with react vite

#

In different directory

#

What should I do next

cobalt steeple
#

You should share it on this channel, so that people who are available can look at it

stoic rover
#

Hi Good Morning

#

How we can use webpack to get bundle .js file to use our js file in components folder

stoic rover
#

I have just refer storybook webpack docs.

#

const config = {
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
framework: {
name: "@storybook/react-webpack5",
options: {},
},
stories: ["../src/stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-storysource",
"@storybook/addon-a11y",
"@storybook/addon-styling",
],
docs: {
autodocs: "tag",
},
staticDirs: ["../static"],
features: {
storyStoreV7: false,
},
core: {
builder: {
name: "@storybook/builder-webpack5",
options: {
fsCache: true,
lazyCompilation: true,
},
},
},
};

export default config;

#

Am using this above mentioned code

stoic rover
#

Hey plz guide

#

Can we externally use webpack?

#

To generate bundle.ja file

hexed comet
#

@stoic rover You can use Webpack to build whatever you want and then import that file into a stories file. That part has nothing to do with Storybook.

In most cases, people use Storybook to build and run their code. Storybook uses Webpack or Vite under the hood. It gets configured based on your project during setup but, you can customize it too.

stoic rover
#

Ok thanks, but how to do it can give me some references.plz

hexed comet
#

I genuinely have no idea what you're trying to do. We asked you to share a reproduction previously and you refused to do that. I'd love to help you but, you actually need to explain what you're trying to do.

cobalt steeple
#

if you are not familiar with how to bundle JavaScript code together and how to build a library, you'll need to learn that first. We can only help you with Storybook but I'm not sure if you have enough experience with the prerequisites

stoic rover